logo标签列表

所有IE CSS Hack

htmlcssinternet-explorer
4
有没有针对所有IE浏览器的CSS hack？而不是特定的IE版本。
我尝试过：
@media \0screen\,screen\9 {
    body { background: green; }
}

但它在IE7和IE11上无法正常工作。
仅使用CSS？不行。即使您想使用单个属性，许多属性在不同版本的IE中都有不同的前缀，或者完全不同的编写方法。然而，有一些JavaScript库可以解决这个问题：css3-mediaqueries-js和Respond.js。 - TylerH
7个回答
5
<!--[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/ 更新：如ElKabong在评论中提到的并且您将在跟随链接时阅读到的，注意IE 10及以上完全不支持条件注释，因此这似乎是一个噩梦，我现在没有简单的解决方案。但是您可以在上面提到的链接中找到更多信息，并阅读评论。
实际上，这并不支持所有的IE版本，在IE 10之后，条件注释不再受支持：http://msdn.microsoft.com/en-us/library/ms537512(v=vs.85).aspx。更彻底的方法是使用特性检测来确定浏览器的功能，并相应地做出响应。请查看我们的modernizr - http://modernizr.com/ - El Kabong
@ElKabong，感谢您的评论，我不知道这个（该死的微软），一旦我有更多时间，我会更新答案，因为您的链接也没有告诉我如何处理IE10特定的样式表...您知道如何解决吗？ - caramba
不用担心 - 这是关于该主题的好文章：http://msdn.microsoft.com/en-us/magazine/hh475813.aspx。这是另一篇提供功能和浏览器支持建议的文章：http://tanalin.com/en/articles/ie-version-js/，您可以使用Modernizr测试其中一个功能并加载适当的资源。 - El Kabong
我无法使用条件样式表，因此正在寻找CSS hack。 - Praveen
根据我的了解，无法通过CSS检测浏览器。你需要条件注释、JavaScript或一些服务器端脚本语言来实现。 - caramba
1
也许以下媒体查询可以帮助你：
    /* <= IE 7 */
    @media screen\9 {}

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

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

重要提示：对于IE9及以上版本，请阅读以下内容：

Important: For IE9 and above Read this:

https://dev59.com/QGw15IYBdhLWcg3wv-ba#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/上找到了这些媒体查询。

1
我只想使用HTML条件注释。
<!--[if IE]>
<style>
    body { background: green; }
</style>
<![endif]-->
@Praveen，**+1** 我不知道IE10中删除了这个功能。 - Drew Chapin
0

试试这个。这是一个在IE 7到10中测试过的CSS hack：

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

对我来说，它运行得很好；）

0

如果您需要针对所有非IE（非<= ie11）浏览器进行定位：

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

它仅适用于现代浏览器，因为IE <= 11不支持嵌套媒体查询。

0

不，你不能在一个媒体查询中实现所有版本的IE，因为尚未找到/创建适用于所有Internet Explorer版本的媒体查询，但你可以将其分割为两个不同的CSS组。以下是一种方法：

这个方法适用于8及更新版本：

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

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

就像你的这个确实是一个CSS hack。IE 9官方支持媒体查询，但是通过hack技巧，IE 8及以下版本被欺骗以使其能够正常工作。

下面是一个适用于IE 7及以下版本的hack：

/* 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的hack。

0
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接