IE8: N-Kind und: vorher

Hier ist mein CSS:

#nav-primary ul li:nth-child(1) a:after { } 

functioniert jetzt überall (verwendet dies auf meiner Website) außer Internet Explorer 8

Gibt es möglicherweise eine Möglichkeit, nth-child in IE8 zu verwenden? Dies ist die schlechteste Version dieses Browsers … nichts funktioniert so, wie es sollte und ich kann keine Lösung finden.

@edit: Vereinfachte Version dessen, was ich erreichen möchte: http://jsfiddle.net/LvvNL/ . Es ist nur ein Anfang. CSS wird komplizierter und ich muss in der Lage sein, jeden dieser Links anzusprechen. Ich hoffe, dass das Hinzufügen von classn zu jedem Link nicht der einzige Weg ist

@ edit2: Das habe ich gerade gemerkt

 #nav-primary ul li:nth-child(1) a { border-top: 5px solid #144201; } 

IS arbeitet tatsächlich in IE8! Aber dieses:

 #nav-primary ul li:nth-child(1) a:after { content: "Text"; display: block; font-weight: normal; padding-top: 5px; font-size: 12px; color: #666; } 

funktioniert nicht. Also, was ist los?

Solutions Collecting From Web of "IE8: N-Kind und: vorher"

Sie können (ab) den benachbarten Geschwisterkombinator ( + ) verwenden , um dies mit CSS zu erreichen, das in IE7 / 8 funktioniert.

Siehe: http://jsfiddle.net/thirtydot/LvvNL/64/

 /* equivalent to li:nth-child(1) */ #nav-primary ul li:first-child a { border-top: 5px solid red; } /* equivalent to li:nth-child(2) */ #nav-primary ul li:first-child + li a { border-top: 5px solid blue; } /* equivalent to li:nth-child(3) */ #nav-primary ul li:first-child + li + li a { border-top: 5px solid green; }​ 

Sie können mit dieser Methode keine komplexeren Variationen von :nth-child() wie :nth-child(odd) oder :nth-child(4n+3) emulieren.

IE9.js triggers dieses und andere damit verbundene Probleme!

:nth-child(odd) und :nth-child(even) arbeiten damit.

Verwendung:

  

Versuchen Sie Pairing Selectivizr mit NMWatcher . Das mache ich auf all meinen Seiten, um eine gute Pseudo Selektor-Unterstützung für alle Browser zu erhalten. FWIW Wenn Sie viele HTML5-Elemente verwenden, lohnt es sich vielleicht, v 1.2.3 von NMWatcher anstatt 1.2.4 zu verwenden. Ich hatte heute ein Selectivizr-Problem mit einer Website, das ich nicht zu beheben schien. Dann bin ich umgezogen zu 1.2.3 und es hat gut funktioniert.

IE8 (und darunter) unterstützt nicht :nth-child() , unterstützt aber :after . Da Sie jedoch :nth-child() before :after in Ihrem Selektor verwenden, wird IE8 es nicht ausführen.

Sie können eine JavaScript-Lösung verwenden, indem Sie dieser Zeile eine class hinzufügen oder eine Bibliothek hinzufügen, die diese Selektoren unterstützt.

Sie können verwenden: first-kind statt: nth-child (1) Dies hat eine bessere Unterstützung in IE7 +

Siehe auch http://quirksmode.org/css/firstchild.html

ie9.js klingt nach der besten Lösung, aber Sie könnten auch einfach eine class zu den Zellen hinzufügen, z

  stuffstuff