【问题标题】:Make alternating CSS table row style work in Internet Explorer在 Internet Explorer 中使用交替的 CSS 表格行样式
【发布时间】: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。

【问题讨论】:

    标签: html css internet-explorer row css-tables


    【解决方案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。
      猜你喜欢
      • 2017-12-18
      • 1970-01-01
      • 2011-11-28
      • 2010-09-25
      • 1970-01-01
      • 2012-09-19
      • 2012-02-12
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多