CSS не работает в IE, но работает в Chrome

Я пытаюсь чередовать цвета строк таблицы нечетными и четными строками. Кажется простым, и он отлично работает в хроме, но когда я тестирую в IE, ничего не меняется. Самое странное, что он изначально работал в IE, но внезапно остановился, и я не могу заставить его работать снова. Вот CSS, который я использую. Любые идеи, почему это не будет работать?CSS не работает в IE, но работает в Chrome

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

источник

2016-10-19 SJR59

IE 7-8 не поддерживает псевдоселектор nth-child. Их поддержка начинается с IE9 http://caniuse.com/#search=nth-child – Dekel

@Dekel - это [за MDN] (https://developer.mozilla.org/en-US/docs/Web/CSS /: п-й ребенок). –

Вы можете использовать библиотеку [Selectivizr] (http://selectivizr.com/) JS для поддержки CSS3 в IE. –

Вы можете пытаться чередовать цвета строк таблицы на четных и нечетных строк, но ваш стиль неправильно вас есть добавить этот CSS для строк тд. так что удалить т.д как этого первого использования этого

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

ИЛИ

Если IE8 не поддерживает п-й ребенок использовать этот код

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

источник

2016-10-20 05:47:04

Хороший ...........! –

Спасибо Punit .....! –

Я пробовал оба этих метода, но ни один из них, похоже, не работает. Я действительно не уверен, почему, потому что он идентичен jsfiddle ... Я так смущен! – SJR59

CSS не работает в IE, но работает в Chrome

ответ

Смежные вопросы