Question

ul li:nth-child(odd){
color:#c0122f;

float:left;

width:48%; 

line-height:30px; 

font-size:15px;
}




ul li:nth-child(even){
color:#c0122f;

width:48%;

float:right; 

line-height:30px;

font-size:15px;
}

在我的页面上有六个li项目，我希望给左侧3个，3个应该是右侧，因为我使用了nth-child（奇数）/甚至我在我的代码中显示它在chrome中的工作正常，mozilla和ie9，但它在ie8 / 7

中产生了问题

Answer 1

http://caniuse.com/#search=nth-child

他们不支持nth-child。不幸的是，你需要为这些浏览器实现一个javascript解决方案。

Answer 2

这些版本的IE不支持nth-child。它包括以后对这些属性的支持！不是那些版本。

但是，这是另一种方式！

使用此脚本：http://selectivizr.com/它将启用一些CSS属性。

注意：您应该始终尝试搜索浏览器兼容性和一些可以帮助您在旧版IE中使用CSS的脚本！

Answer 3

正如提到的其他答案，旧版本的IE不支持第n个孩子。如果将IE条件添加到html标记，则可以向IE版本添加回退类。然后只需要做一些基本的jQuery来添加类。

<强> HTML

<!--[if lt IE 7]>      <html lang="en-us" class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html lang="en-us" class="no-js lt-ie9 lt-ie8 ie7"> <![endif]-->
<!--[if IE 8]>         <html lang="en-us" class="no-js lt-ie9 ie8"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en-us" class="no-js"> <!--<![endif]-->

<强> jquery的

$('.lt-ie9 li:nth-child(odd)').addClass('odd');
$('.lt-ie9 li:nth-child(even)').addClass('even');

<强> CSS

li.odd,
li:nth-child(odd) {
    color: #c0122f;
}

nth-child（）不在ie8 / 7中工作

3 个答案: