IE8: nième enfant et: avant

Question

Voici mon CSS:

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

Fonctionne partout maintenant (utilisé cela sur mon site internet), à l'exception d'Internet Explorer 8...

Est-il éventuellement un moyen d'utiliser nth-child dans IE8? C'est la pire version de ce navigateur... rien ne fonctionne comme il se doit et je ne peux pas trouver un moyen pour résoudre ce problème.

@edit: Version simplifiée de ce que je veux réaliser: http://jsfiddle.net/LvvNL/. C'est juste un début. CSS va être plus compliqué, donc j'ai besoin d'être en mesure de viser chacun des liens. Espérons que l'ajout de classes pour chaque lien n'est pas la seule façon

@edit2: J'ai juste remarqué que

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

Travaille en réalité IE8! Mais ce:

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

n'est PAS de travail. Donc ce qui se passe?

Answer 1

Vous pouvez (ab)utiliser le adjacents frère combinator (+) pour atteindre ce 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 imiter plus complexe variations de :nth-child() comme :nth-child(odd) ou :nth-child(4n+3) avec cette méthode.

Answer 2

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

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

Usage:

 <!--[if lt IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->
 

Answer 3

Essayez d'associer Selectivizr à NMWatcher . C'est ce que je fais sur tous mes sites pour obtenir un bon support de pseudo sélecteur sur tous les navigateurs. Si vous utilisez beaucoup d’éléments HTML5, il vaut peut-être la peine d’utiliser la version 1.2.3 de NMWatcher plutôt que la version 1.2.4, j’ai eu un problème avec selectivizr avec un site que je ne parvenais pas à résoudre, puis j’ai déménagé. à 1.2.3 et cela a bien fonctionné.

Answer 4

IE8 (et inférieur) ne prend pas en charge :nth-child() , mais prend en charge :after . Cependant, étant donné 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 prenant en charge ces sélecteurs.

Answer 5

Vous pouvez utiliser: first-child au lieu de: nth-child (1) cela prend mieux en charge IE7 +

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