Question

我在我的css代码中使用nth-child，但它在IE 8中不起作用。我知道IE 8无法处理nth-child，但我需要找到一种方法来使其工作。

这是我的代码：

.paypalshop .shop-groups li:nth-child(1){
  float:left;
  border: 1px solid #ccc;
  width:200px;

   }

.paypalshop .shop-groups li:nth-child(2){
  float:left;
  border: 1px solid #ccc;
  width:150px;
   }

.paypalshop .shop-groups li:nth-child(3){
  float:left;
  border: 1px solid #ccc;
  width:210px;
   }

.paypalshop .shop-groups li:nth-child(4){
  float:left;
  border: 1px solid #ccc;
  width:200px;
   }

.paypalshop .shop-groups li:nth-child(5){
  float:left;
  border: 1px solid #ccc;
  width:70px;
   }

.paypalshop .shop-groups li:nth-child(6){
  float:left;
  border: 1px solid #ccc;
  width:105px;
   }

.paypalshop .shop-groups li:nth-child(7){
  float:left;
  border: 1px solid #ccc;
  width:154px;
   }

.paypalshop .shop-groups li:nth-child(8){
  float:left;
  border: 1px solid #ccc;
  width:130px;
   }   

.paypalshop .shop-groups li:nth-child(9){
  float:left;
  border: 1px solid #ccc;
  width:220px;
   }
.paypalshop .shop-groups li:nth-child(10){
  float:left;
  border: 1px solid #ccc;
  width:220px;
   }

所以我需要的是找到一种方法使nth-child函数在IE 8上运行。是否有任何jQuery方法可以使它在IE 8上运行？

谢谢！

Answer 1

是使用：nth-child选择器

http://api.jquery.com/nth-child-selector/

改变了css

http://api.jquery.com/css/

e.g。

$("paypalshop .shop-groups li:nth-child(2)").css("width":"150px","float":"left","border":"1px solid #ccc");

Answer 2

不是用jQuery改变CSS（在你的网页布局上添加80kb的页面加载和javascript依赖），为什么不在每个li中添加类？

HTML：

<ul>
    <li class="normal"><!-- 200px --></li>
    <li class="narrow"><!--- 70px --></li>
    <li class="wide"><!-- 220px --></li>
    ...
</ul>

CSS：

li { float: left; border: 1px solid #ccc; }
li.normal { width: 200px; }
li.narrow { width: 70px; }
li.wide { width: 220px; }

Imo，这是一个更清晰，更易读的解决方案，更易于维护并解决您今天可以想象使用的每个浏览器的问题。

Nth Child使用Jquery而不是CSS

2 个答案: