6

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

这是我的代码的一个工作示例（适用于 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>

任何帮助，将不胜感激。

4

3 回答 3

9

那是因为:nth-child IE7/IE8 不支持。

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

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

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

编辑：

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

于 2013-06-01T13:51:48.677 回答
7

下面的例子可能对你有帮助

//For first child
// equivalent to li:nth-child(1)
li:first-child a {
    border-top: 5px solid red;
}

//For second child
// equivalent to li:nth-child(2)
li:first-child + li a {
    border-top: 5px solid blue;
}

//For third child
// equivalent to li:nth-child(3)
 li:first-child + li + li a {
    border-top: 5px solid green;
}​
于 2013-09-24T13:48:40.353 回答
0

对于缺少的功能，使用诸如选择器之类的 polyfill。

  1. 从http://selectivizr.com/downloads/selectivizr-1.0.2.zip从 selectivizr.com 下载
  2. 将其解压缩并将文件放入您的项目中的 app/assets/javascripts 下
  3. 在您的应用程序中引用它，即仅<!--[if (gte IE 6)&(lte IE 8)]><script type="text/javascript" src="selectivizr-min.js"></script><![endif]-->在您的布局的 application.js 文件中引用它。或者...

  4. 对于资产管道，您可以将 gem 'selectivizr-rails' 添加到我们的 Gemfile 中，然后捆绑安装。您从https://github.com/jhubert/selectivizr-rails获得宝石

    然后将以下内容添加到布局中的 head 标签中：

    <!--[if (gte IE 6)&(lte IE 8)]> = javascript_include_tag 'selectivizr' <![endif]-->

  5. 照常进行

于 2013-06-01T15:10:26.583 回答