如何使 Internet Explorer 8 支持 nth child() CSS 元素？答案

【问题标题】：How to make Internet Explorer 8 to support nth child() CSS element?如何使 Internet Explorer 8 支持 nth child() CSS 元素？
【发布时间】：2012-05-21 14:29:05
【问题描述】：

我想给表格行添加斑马条纹效果。在所有其他浏览器中，它可以使用 CSS nth 子元素来完成。但我也想做IE 8。那么我该怎么做呢？

【问题讨论】：

标签： css internet-explorer-8 compatibility css-selectors ie8-compatibility-mode

【解决方案1】：

'first-child' 和 '+' 选择器在 IE7 中都可用，并且 '+' 是相加的。

因此可以通过连续添加'+'选择器来模拟'nth-child'，所以：

tr:nth-child(4)

变成：

tr:first-child + tr + tr + tr

如果所有同级元素都相同，则“*”通配符就足够了，如下所示：

tr:first-child + * + * + *

如果指定很多行，这将减少 css 文件的大小。

请注意，选择器之间的空格不是必需的，因此可以通过省略它们来进一步减小文件大小，因此选择第 1、第 3 和第 5 行：

tr:first-child,tr:first-child+*+*,tr:first-child+*+*+*+*

当然不会想迎合非常大的桌子！

如果使用 * 作为填充符，请确保 :first-child 元素和最后一个元素具有显式标记名，因为该规则将针对 DOM 中的每个元素进行测试，并明确指定这两个元素强制特定浏览器首先将其规则应用到任何一端都会失败，而不是在必须在每个序列中跨过几个元素以最终使每个元素的规则失败之后失败。不要无缘无故地让你的浏览器工作！

【讨论】：

不完全。 tr:nth-child(4) 将等同于 *:first-child + * + * + tr。
@MarnenLaibow-Koser。如果，如上所述，元素是相同的标签名称，为什么需要最后一个tr？
你能改写你的问题吗？我不确定我是否理解您的意思。
@MarnenLaibow-Koser。为什么起始 * 而不是 tr，以及最终 tr 而不是 *，更好，尤其是当条件是它们都是 trs 时？
@MarnenLaibow-Koser。只需一个tr 即可确保规则适用，因此任何至少包含一个tr 的版本都是等效的。基本上，第一个最好明确指定，因为规则引擎可以有机会在早期拒绝应用于任何特定实例的规则。

【解决方案2】：

作为 Selectivizr 的替代方案，您可以使用一点 jQuery：

$('.your-list li:nth-child(3n+1)').addClass('nth-child-3np1');

然后在你的 CSS 中添加第二个选择器：

:nth-child(3n+1)
{
    clear: both;
}

.nth-child-3np1
{
    clear: both;
}

【讨论】：

另外值得注意的是，IE7 和 IE8 将忽略包含不受支持的伪类的语句（例如上面的那个）。要绕过它，您需要单独重新声明事物。 stackoverflow.com/questions/21856542/…

【解决方案3】：

使用 polyfill：Selectivizr 就足够了。

没有 polyfill：由于 IE8 支持第一个孩子，你可以欺骗它来支持 iE8 中的第 n 个孩子，即

/*li:nth-child(2)*/
li:first-child + li {}/*Works for IE8*/

虽然我们无法模拟复杂的选择器，即 IE8 的 nth-child(2n+1) 或 nth-child(odd)。

【讨论】：

这适用于我的第二行，但是如果我在行中有多个 div 并且我想每隔一个着色，不管它们的数量是多少？
@user1997781 正如我之前所说，这个 hack 无法模拟 IE8 的复杂选择器，即不支持 nth-child(2n+1) 或 nth-child(odd)。
因为 '+' 选择器是附加的，你可以通过为每个额外的项目添加 '+ li' 来模拟 ':nth-child' 到任意数量的项目，所以 'li:nth- child(4)' 变为 'li:first-child + li + li + li'
@Patanjali 当您想针对单个奇数/偶数孩子时同意您的看法。但是当你想在我们的样式表中明确地为每个孩子写这个时，用 li + li + ... n 来定位每一行是很困难的，不切实际的。
@SamarPanda。正如您所说，没有办法模拟任意数字的过程，这就是发明特殊格式的原因。摇滚和一个坚硬的箱子在这里。 OP 将不得不忍受它。

【解决方案4】：

您可以使用http://selectivizr.com/ JS，它支持 IE 的 css3 选择器。

【讨论】：

奇怪的是，IE9.js 据称启用了:nth-child() support，但它在实践中不起作用。
@sandeep 我使用了 selectvizr.js，但如果我在一页上有两个表格，它就不起作用。它适用于一张桌子，但不适用于其他桌子