仅通过 CSS 定位 IE9
Posted
技术标签:
【中文标题】仅通过 CSS 定位 IE9【英文标题】：Target IE9 Only via CSS 【发布时间】：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？即我试图？
【问题讨论】：
它会在你最意想不到的时候回来咬你。请改用条件注释：<!--[if IE 9]><![endif]-->.
@nightfirecat - 非常感谢。尝试搜索并找不到任何东西:) 似乎来源是 - blog.vervestudios.co/blog/post/2011/05/13/…
很遗憾微软从来没有在 CSS 中实现条件 cmets。 * 和 _ 是 IE6 和 IE7 的有效标准；代替 Microsoft 实施标准，我们将始终需要这些粗略且现成的 hack。至少 IE10 看起来很有希望，所以不需要 hack。
html 中的条件 cmets 在您无法修改 HTML 的情况下无用。
【参考方案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 ***.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 不适用于特定情况，尤其是在您无法修改页面代码本身的情况下。所以这里有一个解决方法：
基本样式
.testcolor:red;
浏览器特定的覆盖
IE html >/**/body .test color: green;
IE 9：:root .testcolor:green \ ;
IE 8 和 9：.testcolor: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。
【讨论】：
以上是关于仅通过 CSS 定位 IE9的主要内容，如果未能解决你的问题，请参考以下文章
css 用css创建完美的正方形。第二种解决方案使用视口，但仅支持IE9 +
css 通过CSS进行垂直居中（IE9 + w / -ms-前缀） - https://css-tricks.com/centering-css-complete-guide/