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