@keyframes嵌套在@media中IE浏览器兼容问题

最新推荐文章于 2024-02-21 14:38:26 发布

原创

最新推荐文章于 2024-02-21 14:38:26 发布 · 3.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#浏览器判断 #判断浏览器是否为ie10、ie11或更低版本 #@keyframes在媒体查询@media中的IE兼容问题 #ie的@keyframes兼容问题

本文探讨了如何处理@keyframes在媒体查询@media中的IE浏览器兼容性问题，特别是针对IE10、IE11及更低版本。通过使用特定的浏览器判断函数myBrowser()来实现兼容解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>@keyframes嵌套在@media中IE浏览器兼容问题</title>
    <script src="./jquery-1.12.0.min.js"></script>
    <script type = "text/javascript">
      function myBrowser(){
          var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
          if (userAgent.indexOf("Firefox") > -1) {
              return "FF";
          } //判断是否Firefox浏览器
          if (userAgent.indexOf("Chrome") > -1){
              return "Chrome";
          }
          if(!!window.ActiveXObject || "ActiveXObject" in window || (userAgent.indexOf("Trident") > -1)){
              return "IE";
          }//判断是否IE浏览器
      }
      if(myBrowser() == "IE") {
          $("head").append("<link rel = 'stylesheet' href = './for_ie.css'>");
      }
    </script>
</head>
<style>
/*宽度大于400px*/
   @media (min-width: 400px) {
    .box{