IE에서 작동하지 않지만 Chrome에서 작동하는 CSS

Question

홀수 행과 짝수 행으로 표의 행 색상을 번갈아 가려고합니다. 심플하고 크롬에서 잘 작동하지만 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

당신은 홀수 및 짝수 행에 의해 대체 테이블 행의 색을 시도 할 수 있지만 당신의 스타일은 행의 TD이 CSS를 추가가 올바르지 않습니다. 그래서 당신이 바이올린을 확인할 수 있습니다이

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

또는

IE8은 n 번째 아이 사용을 지원하지 않는 경우이 코드이 처음 사용할 때처럼

<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> 

을 TD를 제거합니다. 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>