所有 IE css hack答案

【问题标题】：All IE css hack所有 IE css hack
【发布时间】：2014-06-15 10:33:52
【问题描述】：

是否有适用于所有 IE 浏览器的 css hack。不是特定的 IE 版本。

我试过了

@media \0screen\,screen\9 {
    body { background: green; }
}

但它在 IE7 和 IE11 中不起作用。

【问题讨论】：

只使用 CSS？不，即使您想使用单个属性，它们中的许多对于不同版本的 IE 或完全不同的写出它们的方法都有不同的前缀。然而，有一些 JavaScript 库可以做到这一点：css3-mediaqueries-js 和 Respond.js

标签： html css internet-explorer css-hack

【解决方案1】：

<!--[if IE]>
    <link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->

更多信息可以在这里找到：http://css-tricks.com/how-to-create-an-ie-only-stylesheet/

UPDATE 如 ElKabong 在 cmets 中提到的，您将在点击链接时阅读..

请注意，IE 10 及更高版本根本不支持条件 cmets，所以这似乎是一场噩梦，我现在没有简单的解决方案。但是您可以通过上面提到的链接找到更多信息，也可以通过 cmets 阅读。

【讨论】：

这实际上不会支持所有 IE 风格，在不再支持 IE 10 条件 cmets 之后：msdn.microsoft.com/en-us/library/ms537512(v=vs.85).aspx。更彻底的方法是使用特征检测来确定浏览器的功能并做出相应的响应。检查我们的modernizr - modernizr.com
@ElKabong 谢谢你的评论，我不知道这个（笨拙的 MS），只要我有更多时间我会更新答案，因为你的链接也不是真的告诉我如何处理 IE10 特定的样式表...你知道如何解决吗？
不用担心 - 这是一篇很好的文章：msdn.microsoft.com/en-us/magazine/hh475813.aspx。这是另一篇为功能和浏览器支持提供建议的文章：tanalin.com/en/articles/ie-version-js，您可以使用 Modernizr 测试其中一个功能并加载适当的资产。
我不能使用条件样式表。这就是为什么寻找 css hack
@Praveen 据我所知，无法通过 CSS 检测浏览器。您需要条件 cmets、JavaScript 或一些服务器端脚本语言。

【解决方案2】：

我只需要 HTML 条件注释

<!--[if IE]>
<style>
    body { background: green; }
</style>
<![endif]-->

【讨论】：

@Praveen, +1 我不知道这个功能在 IE10 中被删除了。

【解决方案3】：

也许以下媒体查询会对您有所帮助：

    /* <= IE 7 */
    @media screen\9 {}

    /* IE 8 */
    @media \0screen {}

    /* >= IE10 */
    @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {}

重要提示：对于 IE9 及以上请阅读：

https://stackoverflow.com/a/15442638

在某些情况下，最好只为以下（其他）浏览器启用某些功能：

    /* WebKit */
    @media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) { .selector {} }

    /* Opera >= 12 */
    @media (min-resolution: .001dpcm) { _:-o-prefocus, .selector {} }

    /* Firefox > 4 */
    @media screen and (min--moz-device-pixel-ratio:0) {}

在实现 svg 动画文件时，我遇到了同样的问题。我想排除所有 IE 版本并为它们使用 gif 动画，因为没有 IE 版本不支持动画 SVG 文件。但是看看这个：

http://caniuse.com/#feat=svg-smil

正如您在我的例子中看到的那样，最好默认实现一个动画 gif，并将 SVG 仅用于上面列出的“其他”浏览器。

我在http://browserhacks.com/ 上找到了这些媒体查询

【讨论】：

【解决方案4】：

IE9+ 支持@media 查询

http://caniuse.com/#search=@media

【讨论】：

【解决方案5】：

不，您不能在一个媒体查询中完成所有 IE，因为尚未为所有版本的 Internet Explorer 找到/创建任何内容，但您可以将其拆分为两个不同的 CSS 组。这是一种方法：

这个适用于 8 和更新版本：

/* Internet Explorer 8+ (Media Query) */

@media screen\0 {
   body { background: green; } 
}

就像你的一样，这确实是一个 css hack。 IE 9 正式支持媒体查询，但 IE 8 及更低版本被欺骗允许它们通过 hack 工作。

这是 IE 7 及以下版本的一个：

/* Internet Explorer 7- (Media Query) */

@media screen\9 {
   body { background: green; } 
}

如果这对您不起作用，请在此处尝试另一个 IE 7：

/* Internet Explorer 7- (Another Media Query) */

@media, {
   body { background: green; } 
}

有很多方法可以对 IE 7 进行破解。

【讨论】：

【解决方案6】：

试试这个。这是从 IE 7 到 10 测试的 css hack：

    @media all and (-ms-high-contrast:none)
         {
         .myClass { myProperty: myValues }
         *::-ms-backdrop, .myClass { myProperty: myValues }
         }

对我来说很好用；）

【讨论】：

【解决方案7】：

如果您需要针对所有非 ie（非

@media { @media {
    /* Your styles ... */
}}

它仅适用于现代浏览器，因为 IE

【讨论】：