26

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

4

4 回答 4

57

使用 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)。

于 2013-05-04T20:36:21.890 回答
36

作为 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;
}
于 2013-04-18T22:04:16.767 回答
26

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

于 2012-05-14T05:00:00.077 回答
2

'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 中的每个元素进行测试，并且明确指定这两个元素会在特定浏览器应用它的任何一端强制失败规则首先，而不是在它必须跨过每个序列中的几个元素以最终使每个元素都失败的规则之后失败。不要无缘无故地让你的浏览器工作！

于 2016-07-28T06:07:16.893 回答