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

Question

在下面的示例中，我希望 IE8 以 红色 显示文本，但所有现代浏览器都以 绿色 显示文本。

我知道 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

CSS hack 可能并不优雅，但它们仍然可以完成工作。

IE8 有一些 CSS hack，阅读更多:http://browserhacks.com/

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

p {
  color: green;
}

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

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

另一个使用 选择器 { property: value\9; }

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

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

---

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

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

p {
  color: green;
}

.isIE8 p {
  color: red;
}

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