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




плавающая кнопка наверх html (4)

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


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

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

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

tr:nth-child(4)

будет выглядеть так:

tr:first-child + tr + tr + tr

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

tr:first-child + * + * + *

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

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

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

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

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


С polyfill: http://selectivizr.com/ достаточно хорош.

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

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

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


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





ie8-compatibility-mode