css 媒体查询以针对除 IE 之外的所有浏览器答案

【问题标题】：css media query to target all browsers except for IEcss 媒体查询以针对除 IE 之外的所有浏览器
【发布时间】：2014-09-29 04:08:36
【问题描述】：

我正在寻找一个针对除 IE 之外的所有浏览器的媒体查询。

例如：

    @media (........) {

    }

有没有办法做到这一点？

我正在使用 sass-bootstrap，所以那里可能有一个选项。

谢谢！

这是在 IE 中不起作用的代码：

.animations {
    .legend {
        stroke-dasharray: 1000;
        stroke-dashoffset: 1000;
        animation: internetmarketing 3s linear forwards;
    }
    .line {
        stroke-dasharray: 1000;
        stroke-dashoffset: 1000;
        animation: internetmarketing 3s linear forwards;
        animation-delay: 2s;
    }
}

@keyframes internetmarketing {
    to {
        stroke-dashoffset: 0;
    }
}

【问题讨论】：

媒体查询不能针对浏览器。您到底想完成什么？为什么必须阻止 IE 而不管其版本如何？
我已经制作了一些关键帧，但它们在 IE 中不起作用。我考虑过使用媒体查询来禁用它们。也许通过触发动画的javascript在其他浏览器中添加一个类是一个好习惯。我将在下面发布关键帧。
如果关键帧不起作用，为什么需要禁用它们？他们有什么害处吗？
折线中有一些 display="none" 属性，因为动画在用户向下滚动时开始。在 IE 中什么都看不到。也许我应该在不在 IE 中时添加这些属性。
我用javascript添加动画来修复它，对IE有一个例外。谢谢大家！

标签： css internet-explorer media-queries bootstrap-sass

【解决方案1】：

Html5 Boilerplate中有一个很好的技巧，你应该试试:)

您应该在 HTML 的顶部插入以下代码：

<!doctype html>
<!--[if lt IE 8]> <html class="no-js ie ie8 ie7"> <![endif]-->
<!--[if IE 8]>    <html class="no-js ie ie8 no-ie7"> <![endif]-->
<!--[if gt IE 8]>    <html class="no-js ie no-ie8 no-ie7"> <![endif]-->
<!--[if !IE]><!--> <html class="no-js no-ie"> <!--<![endif]-->
<head>

现在您可以为非 IE 浏览器隐藏或样式化您的页面：

.no-ie {
   .animations {
      .legend {
          stroke-dasharray: 1000;
          stroke-dashoffset: 1000;
          animation: internetmarketing 3s linear forwards;
      }
     .line {
          stroke-dasharray: 1000;
          stroke-dashoffset: 1000;
          animation: internetmarketing 3s linear forwards;
          animation-delay: 2s;
      }
  }

据我所知，它适用于所有浏览器

【讨论】：

这不适用于 IE 11，因为不再支持此条件！