仅通过 CSS 定位 IE9答案

【问题标题】：Target IE9 Only via CSS仅通过 CSS 定位 IE9
【发布时间】：2011-10-03 00:32:45
【问题描述】：

只是想知道我的技巧包中有这些 IE hack

"\9" - for IE8 and below.
"*" - for IE7 and below.
"_" - for IE6.

即比如

body { 
    border:2px solid blue;
    border:2px solid yellow \9;
    *border:2px solid green;
    _border:2px solid orange;
}

是否有人对 IE9 有这样的 hack？即我试图仅通过 CSS 定位 IE9？

【问题讨论】：

它会在你最意想不到的时候回来咬你。请改用条件注释：.
@nightfirecat - 非常感谢。尝试搜索并找不到任何东西:) 似乎来源是 - blog.vervestudios.co/blog/post/2011/05/13/…
很遗憾微软从来没有在 CSS 中实现条件 cmets。 * 和 _ 是 IE6 和 IE7 的有效标准；代替 Microsoft 实施标准，我们将始终需要这些粗略且现成的 hack。至少 IE10 看起来很有希望，所以不需要 hack。
HTML 中的条件 cmets 在您无法修改 HTML 的情况下无用。

标签： html css internet-explorer-9 stylesheet css-hack

【解决方案1】：

很糟糕，但它应该可以工作：

body { 
    border:2px solid blue;
    border:2px solid yellow \9;
    *border:2px solid green;
    _border:2px solid orange;
}
body:nth-child(n) {border:1px solid purple \9; /*Should target IE9 only - not fully tested.*/}

【讨论】：

我已经对此进行了测试，并确认它确实仅针对 IE9 成功。这是对这个问题的唯一真正正确的答案。使用 condcoms 的建议是合理的，但建议不同的解决方案实际上并不能回答最初的问题
是我还是这对属性背景图像不起作用？
\9 似乎也针对 IE10，但 IE11 似乎忽略了它

【解决方案2】：

我建议使用condcoms 来提供 IE9 css 文件或有条件的 html 类，类似于：

<!--[if lt IE 7]> <html lang="en-us" class="no-js ie6"> <![endif]--> 
<!--[if IE 7]>    <html lang="en-us" class="no-js ie7"> <![endif]--> 
<!--[if IE 8]>    <html lang="en-us" class="no-js ie8"> <![endif]--> 
<!--[if gt IE 8]><!--> <html lang="en-us" class="no-js"> <!--<![endif]-->

【讨论】：

始终拥有安全的 HTML。保护自己：使用 condcom。
@Tim：您上面描述的黑客的问题在于它们是错误。从来没有打算有功能。通过使用它们，您可能会导致其他具有类似错误的浏览器出现问题。坚持标准。
Google 应用程序通常没有最好的前端代码。
@Tim：叹息...同样，JavaScript 解决方案也有问题。使用空调。它符合标准并且运行良好。
这些 CSS hack 不会干扰其他浏览器，我已经使用它们多年，没有任何问题。是的，最好使用 condcoms，但是如果您无法控制 HTML，只能控制 CSS，该怎么办？在这种情况下，如果尚未使用 condcom，则无法使用 condcom，并且 CSS hack 可能是您唯一的选择

【解决方案3】：

IE9 非常符合标准。你不应该破解它。

另外，您应该使用IE conditional comments 来加载不同的样式。对于 IE 9，你会这样做：

<!--[if IE 9]>
    <!-- conditional content goes here -->
<![endif]-->

【讨论】：

IE9 非常符合标准。但是符合那个标准。有时，我们仍然会得到不同的解释 IE 9 与良好的浏览器 - 所以，是的，拥有 IE 9 的这些条件非常好。 :)
IE9 肯定是 MS 中最符合标准的东西，但它仍然落后于任何其他浏览器。
@danwellman：唉，IE9 有很多渲染错误（例如 box-shadow），需要对 CSS 进行奇怪的调整。虽然 CC 是实现这些调整的正确方法，但它们通常有点笨拙，并且会使维护 CSS 变得更加困难，例如需要另一个样式表，或者至少定义额外的 CSS 选择器。
不需要破解？请在 2017 年再说一遍。

【解决方案4】：

在这个地址：http://www.impressivewebs.com/ie10-css-hacks/ 我发现了一个仅针对 IE10（及以下）的媒体查询：

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {  
   /* IE10-specific styles go here */  
}

【讨论】：

会影响ie11吗？
这不再适用于 IE9。我不知道为什么。
@JCraine stackoverflow.com/questions/6418139/… 使用<meta http-equiv="X-UA-Compatible" content="IE=9">检查第一个答案以激活 IE9 上的媒体查询
这实际上又对我有用，我发现在 localhost 上运行时它会失败。但是一旦推送到我的服务器上，IE9 就会按预期将其拾取。很奇怪。
我认为这可能来自与您的 HTTP 服务器（Apache / Nginx / IIS ...）推送的标头冲突。检查您在 dev、test 和 prod 环境中的项目配置文件是否相同。

【解决方案5】：

正如某些 cmets 所述，有时条件 HTML 不适用于特定情况，尤其是在您无法修改页面代码本身的情况下。所以这里有一个解决方法：

基本样式

.test{color:red;}

浏览器特定的覆盖

IE html >/**/body .test { color: green; }
IE 9：:root .test{color:green \ ;}
IE 8 和 9：.test{color:green \ ;}
IE 9 和 Opera :root .test {color: green\0;}

注意事项

以上不适用于background 或font-*，任何\0 或\9 hack 通常都是不稳定的。有关 CSS hack 的完整列表，请参阅 http://mynthon.net/howto/-/webdev/CSS-big-list-of-css-hacks.txt。

【讨论】：