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

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

24
compatibility css css-selectors ie8-compatibility-mode internet-explorer-8

4 ответов

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

25

С 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.

57

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

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

1