nth-child在IE7 / IE8中不工作 [英] nth-child doesn't work in IE7/IE8

问题描述

我无法得到：nth-​​child 选择器以使用IE7 / 8。

I cannot get the :nth-child selector to work with IE7/8.

这里是我的代码的工作示例（在Chrome中工作）

Here is a working example of my code (that works in Chrome)

下面是我使用的CSS和HTML：

Below is the CSS and HTML I am using:

CSS： >

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： b

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

任何帮助将不胜感激。

推荐答案

这是因为：nth-​​child 在IE7 / IE8 中不支持。

That's because :nth-child isn't supported in IE7/IE8.

解决这个问题的一个方法是使用 Selectivizr 。

One solution to this problem would be to use Selectivizr.

Selectivizr是一个JavaScript实用程序，用于模拟CSS3伪类
和Internet中的属性选择器Explorer 6-8。

"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。

All you need to do is include the Selectivizr script and, if you aren't already using one, decide which JavaScript library you'd like to use (jQuery, Mootools etc.) and you will have support for the :nth-child selector (amongst various other pseudo-selectors/attribute selectors) in IE6 through to IE8.

编辑：

您的评论， 这里是一个快速教程 ，向您展示如何设置和使用Selectivizr。

In reply to your comment, here's a quick tutorial showing you how to set up and use Selectivizr.

这篇关于nth-child在IE7 / IE8中不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！