web-dev-qa-db-fra.com

IE8: nième enfant et: avant

Voici mon CSS:

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

Fonctionne partout maintenant (utilisé ceci sur mon site web) sauf Internet Explorer 8 ...

Existe-t-il 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 trouve pas le moyen de le réparer.

@edit: Version simplifiée de ce que je veux réaliser: http://jsfiddle.net/LvvNL/ . Ce n'est qu'un début. CSS sera plus compliqué, je dois donc pouvoir viser chacun de ces liens. Espérer que l'ajout de classes à chaque lien n'est pas le seul moyen

@ edit2: Je viens de remarquer que 

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

Travaille actuellement 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?

cssinternet-explorer-8css-selectors
65
smogg

Vous pouvez (ab) utiliser le combinateur frère adjacent (+) pour ce faire 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 variantes plus complexes de :nth-child() telles que :nth-child(odd) ou :nth-child(4n+3) avec cette méthode.

254
thirtydot

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

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

Usage:

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

Essayez de coupler Selectivizr avec 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 paraissais pas pouvoir corriger, puis j’ai déménagé. à 1.2.3 et cela a bien fonctionné.

6
JonMack

IE8 (et inférieur) ne supporte pas:nth-child(), mais ne supporte-t-il :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.

5
Bojangles

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

2
c4urself

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

<tr>
    <td class='first-cell'>stuff</td><td class='second-cell>stuff</td>
</tr>
<tr>
    <td class='first-cell'>stuff</td><td class='second-cell>stuff</td>
</tr>

.first-cell {
    font-weight: bold;
}
.second-cell {
    font-weight: normal;
}
0
omarjebari