如何使Internet Explorer 8支持第n个child()CSS元素？

Question

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

Answer 1

使用polyfill:Selectivizr足够好.

没有polyfill:由于IE8支持first-child,你可以欺骗它以支持iE8中的nth-child,即

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

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

@ user1997781正如我之前所说,这个hack无法模拟IE8的复杂选择器,即不支持nth-child(2n + 1)或nth-child(odd). (2认同)

Answer 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;
}

要添加到此,您可以使用条件注释将oldIE类放在body上,然后仅在该类存在时才执行该jQuery代码段. (3认同)
另外值得注意的是,IE7和IE8将忽略包含不受支持的伪类(例如上面的那个)的语句.要绕过它,您需要单独重新声明事物.http://stackoverflow.com/questions/21856542/internet-explorer-ie7-ie8-ignoring-css-rule-with-nth-child-in-comma-separated (2认同)

Answer 3

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