Question

在下面的示例中，我希望IE8在red中显示文字，但在green显示所有现代浏览器。

我知道IE8不理解像:nth-child()这样的选择器，所以我提出p:nth-child(odd), p:nth-child(even) {...}来覆盖以前的样式。

有没有更优雅的方式呢？我知道条件评论...[if lte IE 8]...存在，但这不是我在这个问题中提出的问题。

p {
  color: red;
}

p:nth-child(odd),
p:nth-child(even) {
  color: green;
}

<p>paragraph 1</p>
<p>paragraph 2</p>
<p>paragraph 3</p>

Answer 1

使用:nth-child定位浏览器是一个坏主意。

特别是如果将该选择器应用于动态集合，当您执行container.removeNode(child)时，浏览器将被强制扫描所有兄弟节点并重新计算其使用的样式。仅仅因为你需要针对IE8，你的文档在所有其他浏览器中都会更重。

我建议将类添加到body元素（在服务器上或通过JS），比如.ie8，并在选择器中使用它：

p {
  color: green;
}

.ie8 p {
  color: red;
}

Answer 2

CSS黑客可能不是优雅，尽管他们仍然可以完成工作。

IE8有一些CSS黑客攻击，详见：http://browserhacks.com/

这是一个，使用@media \0screen { ... }

＆＃13;

p {
  color: green;
}

@media \0screen {
  p {
    color: red;
  }
}

＆＃13;

<p>paragraph 1</p>
<p>paragraph 2</p>
<p>paragraph 3</p>

＆＃13;

另一位使用selector { property: value\9; }

＆＃13;

p {
  color: green;
  color: red\9;
}

＆＃13;

<p>paragraph 1</p>
<p>paragraph 2</p>
<p>paragraph 3</p>

＆＃13;

如果你更喜欢脚本，那么小的JS黑客就是另一个 var isIE8 = document.all && !document.addEventListener;

＆＃13;

/*Set html class if IE8*/
(function(d) {
  if (document.all && !document.addEventListener) {
    d.className += ' isIE8';
  }
})(document.documentElement);

＆＃13;

p {
  color: green;
}

.isIE8 p {
  color: red;
}

＆＃13;

<p>paragraph 1</p>
<p>paragraph 2</p>
<p>paragraph 3</p>

＆＃13;

Answer 3

您可以将:nth-child(odd), :nth-child(even)压缩为:nth-child(n)，这是除:root以外的所有元素的保证匹配：

p {
  color: red;
}

p:nth-child(n) {
  color: green;
}

<p>paragraph 1</p>
<p>paragraph 2</p>
<p>paragraph 3</p>

然而，IE8选择器黑客攻击通常包括将:root添加到每个复杂选择器的开头，而具有相同的效果，甚至添加相同数量的特异性。

Answer 4

您可以使用此库http://selectivizr.com/来为IE提供更新的选择器。

如何使用CSS3选择器忽略IE8？

4 个答案: