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

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

麦兜_冰夕

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

阅读量3.5k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： WEB前端浏览器兼容问题 CSS3 文章标签：浏览器判断判断浏览器是否为ie10、ie11或更低版本 @keyframes在媒体查询@media中的IE兼容问题 ie的@keyframes兼容问题

本文链接：https://blog.youkuaiyun.com/lyn1772671980/article/details/80018161

本文探讨了如何处理@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{