如何使Internet Explorer 8支持nth child()CSS元素?

我想给我的表格行提供一个斑马条纹效果。 在所有其他浏览器中,可以使用CSS第n个子元素完成。 但我想要做的IE 8也。 那我该怎么办呢?

您可以使用http://selectivizr.com/ JS,它支持IE的css3select器。

用polyfill: Selectivizr就够了。

没有polyfill:因为IE8支持第一个孩子,你可以欺骗这个在iE8 ie中支持n-child

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

虽然我们无法模拟IE8的复杂select器,即nn-child(2n + 1)或n-child(odd)。

作为Selectivizr的替代scheme,您可以使用一个小小的jQuery:

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

然后在CSS中添加第二个select器:

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

在IE7中,“第一孩子”和“+”select器都是可用的,“+”是可加的。

因此,可以通过连续添加“+”select器来模拟“第n个孩子”,因此:

 tr:nth-child(4) 

变为:

 tr:first-child + tr + tr + tr 

如果所有兄弟元素都是相同的,那么'*'通配符就足够了,如下所示:

 tr:first-child + * + * + * 

如果指定很多行,将会减小css文件的大小。

请注意,select器之间的空格不是必需的,所以文件大小可以通过将它们排除在外而进一步减小,因此要select第1,3,5行:

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

当然,人们不希望迎合非常大的桌子!

如果使用*作为填充符,确保:first-child元素和最后一个元素被赋予显式标记名,因为规则将针对DOM中的每个元素进行testing,并且指定这两个元素明确强制失败结束一个特定的浏览器首先应用它的规则,而不是在每个序列中必须逐步过渡几个元素以最终使其每个规则失败之后,而不是失败。 不要让你的浏览器无法正常工作!