Я хочу дать эффект полосы зебры для моих строк таблицы. Во всех других браузерах это можно сделать с помощью CSS-го дочернего элемента. Но я тоже хочу сделать IE 8. Как я могу это сделать?
Как сделать Internet Explorer 8 для поддержки элемента nth child() CSS?
Ответ 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, и при указании обоих этих элементов явно произойдет сбой на любом конце конкретный браузер сначала применяет свои правила, а не отказывает после того, как ему пришлось перешагнуть через несколько элементов в каждой последовательности, чтобы в конечном итоге нарушить правило для каждого из них. Не заставляйте ваш браузер работать без уважительной причины!