有没有专门针对IE8的CSS hack？

Question

我想在Internet Explorer 8 (IE8)中使用以下CSS：

color : green;

我想应用一个只影响IE8而不影响IE9、IE6和7的hack。

- Jitendra Vyas

Answer 1

在HTML中使用条件注释，就像这样：

<!--[if IE 8]>
<style>...</style>
<![endif]-->

请看这里：http://www.quirksmode.org/css/condcom.html

你可以可靠地测试IE版本，并确保其他浏览器不会混淆。

- Palantir

---

我需要的是黑客攻击，而不是条件限制。 - Jitendra Vyas

为什么需要黑客？黑客本质上应该被避免使用（除非是绝对的最后手段）。 - Dean Harding

@Palantir: 你说的条件注释确实是某种技巧，但至少它们是被“正式”支持的，并且可以直接针对特定版本进行定位，而不仅仅依赖于引擎解释它们的不同方式。 - Dean Harding

另一个（稍微）加强 hack 论点的事情是，如果已经有针对 ie7 的 hack，那么再加上一个针对 ie6 的 hack。你想将这些 hacks 放在一起，而不是将 ie8 的 hack 分离到代码中的另一个位置。 - James Westgate

使用hack的一个原因是当你在一个环境（如XML/XSL等）中工作时，这个环境会在文件传递到浏览器之前删除所有注释。 - Juha Palomäki

Answer 2

使用媒体查询来区分不同的浏览器：

/* IE6/7 uses media, */
@media, { 
        .dude { color: green; } 
        .gal { color: red; }
} 

/* IE8 uses \0 */
@media all\0 { 
        .dude { color: brown; } 
        .gal { color: orange; }
} 

/* IE9 uses \9 */
@media all and (monochrome:0) { 
          .dude { color: yellow\9; } 
          .gal { color: blue\9; }
} 

/* IE10 and IE11 both use -ms-high-contrast */
@media all and (-ms-high-contrast:none)
 {
 .foo { color: green } /* IE10 */
 *::-ms-backdrop, .foo { color: red } /* IE11 */
 }

参考资料

• CSS属性字母顺序列表 · WebPlatform Docs

• Microsoft CSS供应商前缀

- Paul Sweatte

---

您的 IE8 解决方案不仅适用于 IE8，我在我的电脑上尝试后发现 IE9 和IE10也会继承这种样式。您是否有适用于IE8及以下版本的解决方案？ - Jack Zhang

是的，使用IE9、IE10、IE11等hack来重置IE8 hack设置的样式规则。我已经更新了答案，并加入了这些hack。 - Paul Sweatte

IE8的解决方案仍然无法解决仅适用于IE8的问题，'\0'将适用于IE8、IE9和IE10。实际上，除了条件CSS之外，没有针对仅适用于IE8的样式的黑客方法。 - Jack Zhang

CSS重置的本质在于使用级联。级联允许根据源顺序隐式覆盖规则。这是CSS的本质，既向后兼容又向前兼容。 - Paul Sweatte

这有点像死灵术，但是......你的IE10/11 hack并没有完全起作用。 10使用了你标记为9的内容（9也会这样），11将使用8的内容。此外，你的注释应该真正反映出IE8适用于8-11，而不是将这个事实掩盖在级联下面。 - abluejelly

Answer 3

使用\0。

color: green\0;

然而，我建议使用条件注释来排除IE9，因为目前还不确定这个hack是否也会影响IE9。

无论如何，我从未需要过IE8特定的hack。你想解决的是IE8特定的问题吗？它是否已以IE8标准模式呈现？它的渲染器相当不错。

- BalusC

---

是的，但不要忘记在\0之前加上空格，否则它也会影响IE9。 - ed1nh0

Answer 4

如果需要在CSS中进行小改动，请使用\9，它针对IE8及以下版本（IE6、IE7、IE8）。

.element { 
   color:green \9;
 }

最好的方法是在HTML中使用条件注释，如下所示：

<!--[if IE 8]>
<style>...</style>
<![endif]-->

- Žiga

---

尝试使用属性 content，但在 IE8 下无法移动（未检查其他 IE 版本）。我猜测这是因为我们传递了一个带引号的字符串值，而这个 hack（以及其他一些 hack）可能与其不兼容。content: "\0020" \9; - adi518

Answer 5

最近有一个问题引起了我的注意，那就是如何使用选择器集合来排除IE 8。使用代码.selector, #excludeIE8::before {}将导致IE 8丢弃整个选择器集合，而5-7和9-11则可以正常读取它。任何一个::选择器（::first-line，::before，::first-letter，::selection）都可以使用，我只是选择了::before，以便行文准确。请注意，虚假的::before选择器的目标是成为虚假的，因此如果您实际上有一个具有ID excludeIE8的元素，请务必将其更改为其他内容。

有趣的是，在现代浏览器（FF 45-52，GC 49-57，Edge 25/13）中，一个错误的::选择器会吞噬整个选择器集合（dabblet demo）。看起来最后一个Windows版本的Safari（以及LTE IE 7，哈哈）没有这种行为，同时仍然理解::before。此外，我在规范中找不到任何指示这是预期行为的内容，而且由于它会破坏包含::future-legitimate-pseudoelement的任何选择器集合，所以我倾向于认为这是一个错误，而且将来会给我们带来麻烦。

---

然而，如果您只需要属性级别的内容（而不是规则级别），Ziga的解决方案最好，通过追加 \9（空格很关键；请勿复制粘贴内联部分，因为它使用了一个nbsp）：

/*property-level hacks:*/
/*Standards, Edge*/
prop:val;
/*lte ie 11*/
prop:val\9;
/*lte ie 8*/
prop:val \9;
/*lte ie 7*/
*prop:val;
/*lte ie 6*/
_prop:val;

/*other direction...*/
/*gte ie 8, NOT Edge*/
prop:val\0;

---

旁注：我感觉自己像一个肮脏的死灵法师，但我想要一个记录我今天发现的排除IE8专用选择器集黑客的地方，而这似乎是最合适的地方。

- abluejelly

Answer 6

像这样做应该对你有帮助。

<!--[if IE 8]> 
<div id="IE8">
<![endif]--> 

*Your content* 

<!--[if IE 8]> 
</div>
<![endif]--> 

那么你的CSS可以像这样写：

#IE8 div.something
{ 
    color: purple; 
}

- John Fisher

Answer 7

仅适用于IE8本地浏览器：

.classname{
    *color: green; /* This is for IE8 Native browser alone */
}

- Vel Murugan S

Answer 8

你能不能不使用你已经展示的hack，然后使用一个IE7及以下版本的hack来覆盖它？

- Damien_The_Unbeliever

---

请不要使用黑客技巧！使用黑客技巧来覆盖其他黑客技巧甚至更糟！ - Dean Harding

@codeka - MGS已经在另一个答案的评论中坚持只使用hack，所以我只是顺应潮流。如果是我，我会选择条件语句，就像Plantir已经回答的那样。 - Damien_The_Unbeliever

Answer 9

有多种方法可以将类添加到HTML元素中，以识别您正在使用哪个IE版本：Modernizr、HTML 5 Boilerplate等 - 或者自己编写。然后，您可以在普通的CSS选择器中使用该类（例如.lt-ie9），无需使用任何hack。如果您只想影响IE8而不是早期版本，请使用.lt-ie8选择器将旧值放回。

- thepeer

Answer 10

我正在寻找适用于IE10及以下版本的CSS样式表的好选择（但仅适用于IE8），然后我想到了这个主意：

<!--[if lt IE 10]><div class="column IE10-fix"><![endif]-->
<!--[if !lt IE 10]><!--><div class="column"><!--<![endif]-->

我用一个额外的类来声明我的div或者其他你想要的元素，这样可以让我在同一个样式表中以一种非常易读的方式添加额外的CSS。

它符合W3C标准，而且不是奇怪的CSS hack。

- Sunkhern