在 Internet Explorer 中使用交替的 CSS 表格行样式

Posted 2023-03-05

【中文标题】在 Internet Explorer 中使用交替的 CSS 表格行样式

【英文标题】：Make alternating CSS table row style work in Internet Explorer

【发布时间】：2011-06-12 03:55:03

【问题描述】：

我使用这个 CSS 代码在行中显示数据库输出，其中颜色在每 2 行重复

tbody tr:nth-child(2n) td, tbody tr.even td   
    background: none repeat scroll 0 0 #E5ECF9;  

如果我在 IE 中打开它，它将无法工作。有什么建议吗？

我使用的是 IE 8。

【参考方案1】：

IE8 不支持:nth-child CSS 属性。您可以使用此脚本使其在 IE8 中运行：

https://github.com/roylory/ie7-js

使用方法：

您可以通过条件 cmets 包含它，例如：

<!--[if lte IE 9]>
<script src="IE9.js"></script>
<![endif]-->

脚本只会在IE9及以下加载，其他浏览器看不到。

现场演示： https://jsbin.com/koyahe/edit?html,css,output

（此演示应适用于所有版本的 IE。）

【讨论】：

这个项目看起来已经死了。有更多最近的参考资料吗？

@ChristopherSchultz 您需要支持哪些版本的 IE？ 5 年发生了很多变化。

MSIE 8，不幸的是。我实际上还没有尝试过，但我认为 MSIE 8 根本没有改变，而且 :nth-child 仍然是不行的，所以我正在寻找一个后备解决方案。我的产品已经“手动”执行此操作（通过为每个表格行使用交替的 CSS 类），但我希望删除无用的垃圾，如果有一种半优雅的方式来做到这一点，我很感兴趣。

@ChristopherSchultz 只要您可以在某处找到 ie7-js 库，它应该仍然可以像宣传的那样工作。这些天不知道它的正式位置。

对。我正在寻找对当前官方位置的参考。

【参考方案2】：

我喜欢上面的答案，但如果不刷新文档，备用行颜色似乎不起作用。

也试试 jQuery：

$("tbody tr:even td").css("background-color", "lightgray");

链接：http://docs.jquery.com/Tutorials:Zebra_Striping_Made_Easy

【参考方案3】：

您使用的是哪个版本的 IE？ :nth-child() CSS 在旧版本的 IE 中不起作用。

IE6, IE7, IE8 Fail

IE9（工作）

【讨论】：

有没有办法在IE8中显示？

如果您使用@Šime Vidas 对 IE7.js 的建议，它将适用于 IE8。