IE8:nth-​​child和:之前

Question

这是我的CSS:

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

现在(使用作品无处不在这个在我的网站),除了Internet Explorer 8中......

有没有办法在IE8中使用nth-child？这是这个浏览器最糟糕的版本...没有任何工作,我找不到解决方法.

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

@ edit2:我刚才注意到了

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

IS实际上在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;
}

不管用.那么发生了什么？

Answer 1

您可以(ab)使用相邻的兄弟组合器(+)来实现这一点,使用在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)使用此方法.

Answer 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]-->

Answer 3

尝试将Selectivizr与NMWatcher配对.这就是我在所有网站上所做的,以便在所有浏览器中获得良好的伪选择器支持.如果你使用了很多HTML5元素,那么它可能值得使用NMWatcher的v 1.2.3而不是1.2.4,我今天有一个网站的选择性问题,我似乎无法修复,然后我搬了到1.2.3,它工作正常.

Answer 4

IE8(及以下)不支持 :nth-child(),但不支持:after.但是,因为您:nth-child()之前:after在选择器中使用,IE8将无法运行它.

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