wake-up-neo.com

Wie stelle ich fest, dass Internet Explorer 8 das nte child () - CSS-Element unterstützt?

Ich möchte meine Tabellenzeilen mit einem Zebra-Streifeneffekt versehen. In allen anderen Browsern kann dies mit dem n-ten untergeordneten Element von CSS erfolgen. Aber ich möchte es tun IE 8 auch. SO wie kann ich das machen?

24
surajR

Sie können http://selectivizr.com/ JS verwenden, das den css3-Selektor für IE unterstützt.

25
sandeep

Mit polyfill: Selectivizr ist gut genug.

Ohne Polyfill: Da IE8 First-Child unterstützt, können Sie dies zur Unterstützung von nth-Child in iE8 durchführen, d. H

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

Wir können zwar keine komplexen Selektoren emulieren, d. H. Nth-child (2n + 1) oder nth-child (ungerade) für IE8.

57
Samar Panda

Als Alternative zu Selectivizr können Sie eine kleine jQuery verwenden:

$('.your-list li:nth-child(3n+1)').addClass('nth-child-3np1');

Dann fügen Sie einfach eine zweite Auswahl in Ihrem CSS hinzu:

:nth-child(3n+1)
{
    clear: both;
}

.nth-child-3np1
{
    clear: both;
}
36
Jonathan

Die Selektoren 'first child' und '+' sind beide in IE7 verfügbar, und das '+' ist additiv.

Daher kann 'n-te-Kind' simuliert werden, indem nacheinander '+' Selektoren hinzugefügt werden.

tr:nth-child(4)

wird:

tr:first-child + tr + tr + tr

Wenn alle gleichgeordneten Elemente gleich sind, genügt der Platzhalter '*' wie in:

tr:first-child + * + * + *

dadurch wird die Größe der CSS-Datei reduziert, wenn Sie viele Zeilen angeben.

Beachten Sie, dass Leerzeichen zwischen Selektoren nicht erforderlich sind. Daher kann die Dateigröße weiter reduziert werden, indem Sie sie weglassen, um die erste, dritte und fünfte Zeile auszuwählen:

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

Natürlich möchte man nicht für sehr große Tische sorgen!

Wenn Sie * als Füller verwenden, stellen Sie sicher, dass das :first-child-Element und das letzte Element den expliziten Namen erhalten, da die Regel mit jedem Element im DOM getestet wird. Durch die Angabe dieser beiden Elemente wird der Ausfall explizit an jedem Ende erzwungen browser wendet seine Regeln zuerst an, anstatt zu scheitern, nachdem er in jeder Sequenz mehrere Elemente übergehen musste, um die Regel für jedes von ihnen zu verfehlen. Sorgen Sie dafür, dass Ihr Browser nicht ohne Grund funktioniert!

1
Patanjali