Селектора IE8 и jQuery

Сегодня мне пришло в голову, что комбинация селекторов jQuery и функции addClass() не работает должным образом в IE8.

Например, когда я хочу, чтобы четные строки были выбраны в таблице, я написал:

jQuery(document).ready(function($){
    $("#table1 tr:nth-child(even)").addClass("even");
}

И для CSS я написал:

#table1 tr:nth-child(even), #table1 tr.even {
    background-color: #ff0;
}

В Firefox, Chrome, Safari и Opera, даже без селектора псевдокласса в файле CSS, выбираются строки с четными номерами. Однако в IE8 это не так. Строки не имеют другого цвета фона.

Это странно, потому что когда я использовал:

jQuery(document).ready(function($){
    $("#table1 tr:nth-child(even)").css({"background-color":"#ff0"});
}

Выбранные строки выделены в IE8.

Ниже приведен пример проблемы - пример 24ways. В Firefox, Chrome, Safari и Opera нечетным строкам присваивается класс "нечетный". Однако в IE8 им не присваивается класс "нечетных" и не подсвечивается.

Ответы

Ответ 1

Селектор работает корректно на стороне jQuery... но IE8 полностью отбрасывает правило стиля (в соответствии с спецификация), потому что он не распознает nth-child:

tr:nth-child(odd) td, tr.odd td {
  background-color: #86B486;
}

Если вы разделите его, он будет работать правильно:

tr:nth-child(odd) td {
  background-color: #86B486;
}
tr.odd td {
  background-color: #86B486;
}

Здесь оригинальная версия (удаляется одно правило IE8) и здесь фиксированный образец, с разделом правила.

Для полноты, обратное правило как это не помогает:

tr.odd td, tr:nth-child(odd) td {
  background-color: #86B486;
}

Ответ 2

это работает для меня в ie8 и ie9 сначала вам нужно 2 класса с фоном

.even { background-color: white; } 
.odd { background-color: #ff0; }

затем с помощью jquery find tr: нечетное добавление tr: равно и добавьте соответствующий класс

$(document).ready(function () {
        $('#table1').find('tr:odd').addClass("odd"); 
        $('#table1').find('tr:even').addClass("even"); 
});