css 媒体查询以针对除 IE 之外的所有浏览器
Posted
技术标签:
【中文标题】css 媒体查询以针对除 IE 之外的所有浏览器【英文标题】：css media query to target all browsers except for 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有一个例外。谢谢大家！ 【参考方案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，因为不再支持此条件！以上是关于css 媒体查询以针对除 IE 之外的所有浏览器的主要内容，如果未能解决你的问题，请参考以下文章