Question

我试图用奇数行和偶数行替换表行颜色。看似简单，它在chrome中运行良好但是当我在IE中测试时没有任何变化。最奇怪的是，它最初在IE中工作，但突然停止了，我无法让它再次工作。这是我正在使用的CSS。任何想法为什么这不起作用？

.styleIntr {
white-space: nowrap;
margin-top: 5px;
background-color: #DFF0F9;
margin-bottom: 5px;
border: 1px solid #CCC;
height: 320px;
z-index: 1;
font-size: 9pt;
color: #000;
padding-left: 50px;
padding-right: 50px;
}
   .styleIntr tr:nth-child(odd) td{
    background: #DFF0F9;
    }
    .styleIntr tr:nth-child(even) td{
    background: #EFF7FB;
    }

这是HTML：

<table class="styleIntr" border="0" cellpadding="3" cellspacing="1" rules="rows" frame="hsides" align="right"
width="10%">            

<TBODY><TR>
<TD style="HEIGHT: 20px"><SPAN id=Label3>Time</SPAN> </TD>
<TD style="HEIGHT: 20px"><SPAN id=Label4>Type</SPAN> </TD>
<TD style="HEIGHT: 20px"><SPAN id=Label5>Type 1</SPAN> </TD></TR>
<TR>
<TD align=center style="HEIGHT: 20px">09:00 </TD>
<TD align=center style="HEIGHT: 20px">S </TD>
<TD align=center style="HEIGHT: 20px">B </TD></TR>
<TR>
<TD colSpan=3>&nbsp; </TD></TR>
</TBODY>
    </table>

Answer 1

您可以尝试按奇数行和偶数行替换表格行颜色但是您的样式不正确您已将此css添加到行td。所以删除这样的td 首先使用此

<style>
   .styleIntr tr:nth-child(odd){
    background: #DFF0F9;
    }
    .styleIntr tr:nth-child(even){
    background: #EFF7FB;
    }
</style>

OR

如果IE8不支持nth-child 使用此代码

<script>
$(document).ready(function() {
    $(".styleIntr tr:nth-child(even)").addClass("even");
    $(".styleIntr tr:nth-child(odd)").addClass("odd");
});
</script>
<style>
   .styleIntr tr.odd{
    background: #DFF0F9;
    }
    .styleIntr tr.even{
    background: #EFF7FB;
    }
</style>

你可以查看这个小提琴。 https://jsfiddle.net/foku4qa3/

如果IE不支持，请使用此功能。

<table class="styleIntr" border="0" cellpadding="3" cellspacing="1" rules="rows" frame="hsides" align="right"
width="10%">            

<TBODY><TR>
<TD style="HEIGHT: 20px"><SPAN id=Label3>Time</SPAN> </TD>
<TD style="HEIGHT: 20px"><SPAN id=Label4>Type</SPAN> </TD>
<TD style="HEIGHT: 20px"><SPAN id=Label5>Type 1</SPAN> </TD></TR>
<TR>
<TD align=center style="HEIGHT: 20px">09:00 </TD>
<TD align=center style="HEIGHT: 20px">S </TD>
<TD align=center style="HEIGHT: 20px">B </TD></TR>
<TR>
<TD colSpan=3>&nbsp; </TD></TR>
</TBODY>
    </table>
<script>
$(document).ready(function() {
    $(".styleIntr tr:odd").addClass("odd");
    $(".styleIntr tr:even").addClass("even");
});
</script>
<style>
   .styleIntr tr:nth-child(odd){
    background: #DFF0F9;
    }
    .styleIntr tr:nth-child(even){
    background: #EFF7FB;
    }
    .styleIntr tr.odd{
    background: #DFF0F9;
    }
    .styleIntr tr.even{
    background: #EFF7FB;
    }
</style>

CSS无法在IE中运行但在Chrome中运行

1 个答案: