Как сделать Internet Explorer 8 для поддержки элемента nth child() CSS?

Question

Я хочу дать эффект полосы зебры для моих строк в таблице. Во всех других браузерах это можно сделать с помощью CSS-го дочернего элемента. Но я тоже хочу сделать IE 8. ТАК, как я могу это сделать?

Answer 1

Вы можете использовать http://selectivizr.com/ JS, которые поддерживают селектор css3 для IE.

Answer 2

В качестве альтернативы Selectivizr, вы можете использовать немного Jquery:

$('.your-list li:nth-child(3n+1)').addClass('nth-child-3np1'); 

Затем просто добавить второй селектор в вашем CSS:

:nth-child(3n+1) 
{ 
    clear: both; 
} 

.nth-child-3np1 
{ 
    clear: both; 
} 

Answer 3

С polyfill: Selectivizr достаточно хорошо.

Без polyfill: В IE8 поддерживает первого ребенка вы можете обмануть это, чтобы поддержать п-го ребенка в ie8 т.е.

/*li:nth-child(2)*/ 
li:first-child + li {}/*Works for IE8*/ 

Хотя мы не можем подражать сложные селекторы, то есть п-й ребенок (2n + 1) или nth- дочерний (нечетный) для IE8.

Answer 4

Селектора «первый-ребенок» и «+» доступны в IE7, а «+» является аддитивным.

Поэтому 'п-го ребенка можно моделировать путем последовательного добавления '+' селекторы, так что:

tr:nth-child(4) 

становится:

tr:first-child + tr + tr + tr 

Если все элементы одноуровневых одинаковы, то' * 'подстановочный символ будет достаточным, например:

tr:first-child + * + * + * 

, который уменьшит размер файла css при указании большого количества строк.

Обратите внимание, что пробелы между селекторов не требуется, поэтому размер файла может быть уменьшен, оставляя их, так, чтобы выбрать 1-й, 3-й и 5-й строки:

tr:first-child,tr:first-child+*+*,tr:first-child+*+*+*+* 

Конечно один не хотел бы для обслуживания очень больших столов!

При использовании * в качестве наполнителя, убедитесь, что :first-child элемент и последний элемент дан явный тэг, так как правило, будет протестировано каждого элемента в DOM, а также с указанием обоих этих элементов явно заставляет сбой в в зависимости от того, какой конкретный браузер применяет свои правила к первому, вместо того, чтобы потерпеть неудачу после того, как ему пришлось перешагнуть несколько элементов в каждой последовательности, чтобы в конечном итоге вывести правило для каждого из них. Не заставляйте браузер работать без уважительной причины!