nth-child() 在 ie8 /7 中不起作用答案

【问题标题】：nth-child() is not working in ie8 /7nth-child() 在 ie8 /7 中不起作用
【发布时间】：2014-01-16 03:46:30
【问题描述】：

ul li:nth-child(odd){
color:#c0122f;

float:left;

width:48%; 

line-height:30px; 

font-size:15px;
}




ul li:nth-child(even){
color:#c0122f;

width:48%;

float:right; 

line-height:30px;

font-size:15px;
}

我的页面上有六个 li 项目，我想给 3 个放在左侧，3 个应该放在右侧，因为我使用了 nth-child(odd)/ 即使我在我的代码中显示它在 chrome 中工作正常, mozilla 和 ie9 但它会在 ie8 /7 中产生问题

【问题讨论】：

ie7/8 不支持nth-child()：caniuse.com/#search=nth-child
也可以在MDN上查看
Add CSS3 support to IE7+ with Javascript的可能重复

标签： css

【解决方案1】：

http://caniuse.com/#search=nth-child

他们不支持nth-child。不幸的是，您需要为这些浏览器实现一个 javascript 解决方案。

【讨论】：

你提供的链接没有任何意义，不要以错误的方式接受它对我没有帮助我仍然坚持我的问题

【解决方案2】：

抱歉，这些版本的 IE 不支持 nth-child。稍后它包括对这些属性的支持！不在那些版本中。

但是，这里有另一种方式！

使用这个脚本：http://selectivizr.com/ 它将启用一些 CSS 属性。

注意：您应该始终尝试搜索浏览器兼容性和一些有助于您在旧版 IE 中使用 CSS 的脚本！

【讨论】：

"您应该始终尝试搜索浏览器兼容性和一些可以帮助您在旧版本 IE 中使用 CSS 的脚本！" -- 错了，您应该始终将您的人口统计和代码考虑到大多数用户。如果用户群主要是 IE6，那么用一堆 javascript 加载页面将会扼杀 UX，从而扼杀你的底线。永远是工程师，从不破解。
呵呵呵呵现在连微软都禁止用户使用IE6了！ :) 所以，你可以告诉使用 IE6 的用户更新他们的浏览器，我只是说搜索，我没有说只搜索而不使用 JS..我确实提到了 JS！
是的，确实如此。但这并不意味着世界各地的企业都在倾听。同样，工程意味着您找到问题的正确解决方案。黑客攻击是在不知道最终影响的情况下对问题进行大量脚本处理。显然，他针对的是旧版浏览器是有原因的。
是的，所以如果他有理由，那么他应该找到解决方案！ :)
同意。他通过在 SO 上发帖来做到这一点。但是，您建议用巡航导弹点燃一支香烟，并把它当作唯一的方式来展示。脚本还有许多其他替代方案，例如优雅降级或渐进增强。

【解决方案3】：

正如提到的其他答案，旧版本的 IE 不支持第 n 个孩子。如果您将 IE 条件添加到您的 html 标记，则可以将回退类添加到 IE 版本。然后只需做一些基本的 jQuery 来添加类。

html

<!--[if lt IE 7]>      <html lang="en-us" class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html lang="en-us" class="no-js lt-ie9 lt-ie8 ie7"> <![endif]-->
<!--[if IE 8]>         <html lang="en-us" class="no-js lt-ie9 ie8"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en-us" class="no-js"> <!--<![endif]-->

jquery

$('.lt-ie9 li:nth-child(odd)').addClass('odd');
$('.lt-ie9 li:nth-child(even)').addClass('even');

css

li.odd,
li:nth-child(odd) {
    color: #c0122f;
}

【讨论】：

你能告诉我如何在css代码中实现我很困惑请给出确切的代码
不确定我还能举出什么其他例子。 js 将为这些 li 元素添加一个“奇数”或“偶数”类，因此您只需将 li.odd 或 li.even 添加到现有的 css 中即可。