internet-explorer - nth-child 在 IE7/IE8 中不工作

Question

我无法让 :nth-child 选择器与 IE7/8 配合使用。

Here is我的代码的一个工作示例(在 Chrome 中有效)

下面是我使用的 CSS 和 HTML:

CSS:

#price-list {
    width:98%;
    padding:1%;
    border:white 1px solid;
    margin:0 auto;
    overflow:hidden;
}        
#price-list h4 {
    padding-top:20px; 
    font-weight:400;  
    padding-bottom:5px;
}        
#price-list ul { 
    width:100%; 
    margin-bottom:10px; 
    overflow:hidden; 
}      
#price-list li{
    line-height:1.5em;
    border-bottom:1px  dashed #C9F;
    float:left;
    display:inline;
    padding-top:5px; 
    padding-bottom:5px;
    text-align:center;          
}        
#price-list li strong { 
    color:#C9F; 
    font-weight:normal;
}        
#double-taxi li:nth-child(odd) { 
    width:80%;
    text-align:left; 
}
#double-taxi li:nth-child(even) { 
    width:20%;
}

HTML:

<div id="price-list">
   <ul id="double-taxi">            
      <li><h4>North Goa</h4><strong>(Distance kms)</strong></li><li><h4>Non A/C</h4>Rs <strong>(UK &pound;)</strong></li>
      <li>Aldona <strong>(10 kms)</strong></li><li>250 Rs <strong> (&pound;3)</strong></li>
      <li>Asnora <strong>(15 kms)</strong></li><li>250 Rs <strong> (&pound;3)</strong></li>
      <li>Bicholim <strong>(21 kms)</strong></li><li>420 Rs <strong> (&pound;5)</strong></li>
      <li>Camurlim <strong>(10 kms)</strong></li><li>250 Rs <strong> (&pound;3)</strong></li>
      <li>Colvale <strong>(10 kms)</strong></li><li>250 Rs <strong> (&pound;3)</strong></li>
   </ul>
     We DO NOT provide a taxi service. The Exchange Rate used to calculate UKP was 80Rs to the UKP and was rounded  up to whole pound.
</div>

如有任何帮助，我们将不胜感激。

Answer 1

那是因为 :nth-child isn't supported in IE7/IE8 .

这个问题的一个解决方案是使用 Selectivizr .

"Selectivizr is a JavaScript utility that emulates CSS3 pseudo-classes and attribute selectors in Internet Explorer 6-8."

您需要做的就是包含 Selectivizr 脚本，如果您还没有使用它，请决定您想要使用哪个 JavaScript 库(jQuery、Mootools 等)，您将获得对 :nth-child 选择器(在各种其他伪选择器/属性选择器中)在 IE6 到 IE8 中。

编辑:

回复您的评论，here's a quick tutorial向您展示如何设置和使用 Selectivizr。