1

我nth-child在我的 css 代码中使用，但它在 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 上运行吗？

谢谢！

4

2 回答 2

4

是的，使用 :nth-child 选择器

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

随着CSS的变化

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

例如

$("paypalshop .shop-groups li:nth-child(2)").css("width":"150px","float":"left","border":"1px solid #ccc");
于 2012-08-01T18:59:00.837 回答
0

与其用 jQuery 改变 CSS（为您的页面加载和 javascript 对网站布局的依赖添加 80kb），为什么不向其中的每一个添加类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，这是一个更清洁、更易读的解决方案，更易于维护，并解决了当今使用的每一个浏览器的问题。

于 2012-08-02T09:24:57.547 回答