IE8: nth-child et: avant

Voici mon CSS:

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

Fonctionne partout maintenant (utilisé sur mon site) sauf Internet Explorer 8 …

Est-il possible d’utiliser nth-child dans IE8? C’est la pire version de ce navigateur … rien ne fonctionne comme il se doit et je ne trouve pas de moyen de le réparer.

@edit: version simplifiée de ce que je veux réaliser: http://jsfiddle.net/LvvNL/ . C’est juste un début. Le CSS sera plus compliqué, donc je dois pouvoir viser chacun de ces liens. J’espère que l’ajout de classes à chaque lien n’est pas la seule façon

@ edit2: Je viens de remarquer que

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

Est en train de travailler dans IE8! Mais ça:

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

ne fonctionne pas. Alors, quoi de neuf?

Vous pouvez (ab) utiliser le combinateur frère ( + ) adjacent pour y parvenir avec CSS qui fonctionne dans IE7 / 8.

Voir: 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; }​ 

Vous ne pouvez pas émuler des variations plus complexes de :nth-child() comme :nth-child(odd) ou :nth-child(4n+3) avec cette méthode.

IE9.js résout ce problème et d’autres problèmes connexes!

:nth-child(odd) et :nth-child(even) travaillent avec ceci.

Usage:

  

Essayez de jumeler Selectivizr avec NMWatcher . C’est ce que je fais sur tous mes sites pour obtenir une bonne prise en charge des pseudo-sélecteurs sur tous les navigateurs. FWIW si vous utilisez beaucoup d’éléments HTML5, cela peut valoir la peine d’utiliser v 1.2.3 de NMWatcher plutôt que 1.2.4. à 1.2.3 et cela a bien fonctionné.

IE8 (et ci-dessous) ne supporte pas :nth-child() , mais supporte :after . Cependant, parce que vous utilisez :nth-child() avant :after dans votre sélecteur, IE8 ne l’exécutera pas.

Vous pouvez utiliser une solution JavaScript en ajoutant une classe à cette ligne ou une bibliothèque qui prend en charge ces sélecteurs.

Vous pouvez utiliser: first-child au lieu de: nth-child (1) cela a un meilleur support dans IE7 +

Voir aussi http://quirksmode.org/css/firstchild.html

ie9.js semble être la meilleure solution, mais vous pouvez également append une classe aux cellules, par exemple

  stuffstuffComment désactiver l'affichage de compatibilité dans IE
  • Dependency Walker rapporte que IESHIMS.DLL et WER.DLL sont manquants?
  • balises header / footer / nav - qu'advient-il de IE7, IE8 et des navigateurs que ne supporte pas HTML5?
  • Filtre IE8 XSS: qu'est-ce que ça fait vraiment?