/ / Как да накарам Internet Explorer 8 да поддържа nth child () CSS елемент? - css, internet-explorer-8, съвместимост, css-селектори, ie8-съвместимост-режим

Как да накараме Internet Explorer 8 да поддържа nth child () CSS елемент? - css, internet-explorer-8, съвместимост, css-селектори, ie8-съвместимост-режим

Искам да дам ефект на зебра лента на реда ми таблици. Във всички други браузъри може да се направи с помощта на CSS nth child element. Но аз искам да го направя IE 8 също. Как мога да го направя?

Отговори:

25 за отговор № 1

Можеш да използваш http://selectivizr.com/ JS, които поддържат css3 селектор за IE.


57 за отговор № 2

С полифил: Selectivizr е достатъчно добър.

Без polyfill: Тъй като IE8 поддържа първото дете, можете да го подведете, за да подкрепите nth-child в iE8 т.е.

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

Въпреки че не можем да подражаваме на сложни селектори т.е. nth-child (2n + 1) или nth-child (нечетно) за IE8.


36 за отговор № 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;
}

1 за отговор № 4

Селекторите "първи дете" и "+" са налични в IE7, а "+" е добавка.

Ето защо "n-дете" може да бъде симулирана чрез последователно добавяне на селектори "+", така че:

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 елемент и последният елемент е даденexplicit, тъй като правилото ще бъде тествано срещу всеки елемент в DOM, а уточняването на тези два елемента изрично ще доведе до неуспех на който и да е край, определен браузър да прилага правилата си на първо място, вместо да не успее, след като е трябвало да премине през няколко елемента всяка последователност, за да не успее правилото за всеки от тях. Не правете браузъра си работа без основание!