IE8 :nth-child 和 :before答案

【问题标题】：IE8 :nth-child and :beforeIE8 :nth-child 和 :before
【发布时间】：2012-01-19 11:57:05
【问题描述】：

这是我的 CSS：

#nav-primary ul li:nth-child(1) a:after { }

现在可以在任何地方使用（在我的网站上使用 this），除了 Internet Explorer 8...

有没有办法在 IE8 中使用 nth-child？这是此浏览器的最差版本...没有任何效果，我找不到修复它的方法。

@编辑：我想要实现的简化版本：http://jsfiddle.net/LvvNL/。它只是一个开始。 CSS 会更复杂，所以我需要能够瞄准每个链接。希望为每个链接添加类不是唯一的方法

@edit2: 我刚刚注意到了

#nav-primary ul li:nth-child(1) a {
    border-top: 5px solid #144201;
}

实际上在 IE8 中工作！但是这个：

#nav-primary ul li:nth-child(1) a:after {
    content: "Text";
    display: block;
    font-weight: normal;
    padding-top: 5px;
    font-size: 12px;
    color: #666;
}

不工作。那到底是怎么回事？

【问题讨论】：

没有。 IE6是最差的版本 </rant>
@SLaks: IE6 不是浏览器。
我没说它是浏览器；我说这是一个版本。 :-)
@SLaks：好点。那你是对的:)
为什么不直接使用:first-child 而不是:nth-child(1)？ IE8 支持。

标签： css internet-explorer-8 css-selectors

【解决方案1】：

您可以（ab）使用adjacent sibling combinator (+) 来实现这一点，并使用适用于 IE7/8 的 CSS。

见：http://jsfiddle.net/thirtydot/LvvNL/64/

/* equivalent to li:nth-child(1) */
#nav-primary ul li:first-child a {
    border-top: 5px solid red;
}
/* equivalent to li:nth-child(2) */
#nav-primary ul li:first-child + li a {
    border-top: 5px solid blue;
}
/* equivalent to li:nth-child(3) */
#nav-primary ul li:first-child + li + li a {
    border-top: 5px solid green;
}

您无法使用此方法模拟:nth-child() 的更复杂变体，例如:nth-child(odd) 或:nth-child(4n+3)。

【讨论】：

如果我有nth-child(5n+2) 或nth-child(-n+6) 会怎样？
@SnakeEyes：那你不能在 IE7/8 中使用纯 CSS。如果你有一个已知的元素数量上限，你可以手动选择索引7, 9, 11, 13, 15, .. 的元素，只要你需要。或者，在下面的答案中使用 JavaScript 来修复它，例如 IE9.js。否则，接受 IE7/8 很糟糕，不要尝试修复它。
你可以像这样模拟奇数：.container .row:first-child, .container .row:first-child + .row + .row, .container .row:first-child + .row + .row + .row + .row, .container .row:first-child + .row + .row + .row + .row + .row + .row {}
@aholmes：如果您知道最大可能的元素数量，这是一个解决方案。
@thirtydot：天哪！您是否真的希望 JSFiddle 本身可以在 IE 8 中工作？ ;-) 谢谢顺便说一句:-)

【解决方案2】：

IE9.js 解决了这个问题和其他相关问题！

:nth-child(odd) 和 :nth-child(even) 使用此功能。

用法：

<!--[if lt IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->

【讨论】：

淘金！对于 IE8 用户来说可能不是最佳选择，因为脚本有点重，但它绝对让我的工作更轻松，让我的老板开心！

【解决方案3】：

尝试将Selectivizr 与NMWatcher 配对。这就是我在所有网站上所做的，以便在所有浏览器中获得良好的伪选择器支持。 FWIW，如果您使用大量 HTML5 元素，那么使用 NMWatcher 的 v 1.2.3 而不是 1.2.4 可能值得，我今天遇到了一个似乎无法修复的网站的选择性问题，然后我搬家了到 1.2.3，它运行良好。

【讨论】：

@JonMack Selectivizr 太棒了！除了添加对脚本文件的引用之外，我没有任何输入就立即工作！
@JonMack 工作出色，谢谢。不明白为什么它需要两个脚本，但 nvm 可以工作！
Selectivizr 看起来很有前途，但它是否可能不适用于 jQuery 1.10.x？

【解决方案4】：

IE8（及以下）doesn't support:nth-child()，但确实支持:after。但是，因为您在选择器中使用 :nth-child() 之前的 :after，所以 IE8 不会运行它。

您可以通过向该行添加一个类或添加对这些选择器的支持的库来使用 JavaScript 解决方案。

【讨论】：

是的，我试图找到一些 .js，但没有任何效果。你有什么想法吗？

【解决方案5】：

您可以使用 :first-child 代替 :nth-child(1) 这在 IE7+ 中有更好的支持

另见http://quirksmode.org/css/firstchild.html

【讨论】：

是的，但我还需要瞄准第二个和第三个孩子。

【解决方案6】：

ie9.js 听起来是最好的解决方案，但您也可以只向单元格添加一个类，例如

<tr>
    <td class='first-cell'>stuff</td><td class='second-cell>stuff</td>
</tr>
<tr>
    <td class='first-cell'>stuff</td><td class='second-cell>stuff</td>
</tr>

.first-cell {
    font-weight: bold;
}
.second-cell {
    font-weight: normal;
}

【讨论】：