Подтвердить что ты не робот

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

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

4b9b3361

Ответ 1

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

Ответ 2

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

Без polyfill: поскольку IE8 поддерживает первый ребенок, вы можете обмануть это, чтобы поддерживать nth-child в iE8 i.e

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

Хотя мы не можем эмулировать сложные селекторы i.e nth-child (2n + 1) или nth-child (нечетные) для IE8.

Ответ 3

В качестве альтернативы 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;
}

Ответ 4

Селекторы "first-child" и "+" доступны в IE7, а "+" является аддитивным.

Следовательно, nth-child может быть смоделирован путем последовательного добавления селекторов "+", поэтому:

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, и при указании обоих этих элементов явно произойдет сбой на любом конце конкретный браузер сначала применяет свои правила, а не отказывает после того, как ему пришлось перешагнуть через несколько элементов в каждой последовательности, чтобы в конечном итоге нарушить правило для каждого из них. Не заставляйте ваш браузер работать без уважительной причины!