nth-child 在 IE7/IE8 中不起作用

Posted 2023-03-06

【中文标题】nth-child 在 IE7/IE8 中不起作用

【英文标题】：nth-child doesn't work in IE7/IE8

【发布时间】：2013-05-28 05:25:02

【问题描述】：

我无法让 :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>

任何帮助将不胜感激。

【问题讨论】：

你没有做错任何事——IE7和IE8不支持。你需要使用 JS 来适应它，或者接受旧版本的浏览器看起来不如新版本的浏览器那么华丽。

你可以使用JQuery's nth-child() selector。

这是一个 CSS3 规则，IE9 之前不支持

【参考方案1】：

那是因为:nth-childisn't supported in IE7/IE8。

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

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

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

编辑：

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

【讨论】：

还有一个像 jQuery 或 motools 这样的 javascript 插件是必须的。

@Mr_Green 是的，有一个表格显示了网站上的每个主要库都支持哪些选择器。如果你问我，这是非常有用的实用程序:)

您需要使用 Selectivizr 和 jquery 才能让它工作吗？请您将所需的代码作为示例，因为我一直尽可能远离 Javascript

@user2443301 这是一个快速教程，应该只需要几分钟 :) - blog.reybango.com/2010/09/08/…

我可以将 Jquery 行放在 if 语句中，这样我只为 IE 加载它，否则我不使用它......

【参考方案2】：

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

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

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

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

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

照常进行

【参考方案3】：

以下示例可能对您有所帮助

//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;
​

【讨论】：

您能对您提供的 css 添加一些解释吗？

值得了解，但不能解决问题中的nth-child(odd) 等情况。此外，first-child 和 + 选择器在 IE7 中存在严重错误，因此作为替代解决方案并不是那么好。

More Details

另外，供参考CSS Sibling Selectors