Comment utiliser :nth-child dans Internet Explorer 8 : une solution de contournement

IE8 :nth-child et :before: A Fix

Internet Explorer 8 est connu pour ses incohérences avec les standards du Web modernes. Un problème courant rencontré par les développeurs est le manque de prise en charge du sélecteur CSS nième enfant.

Le problème

Considérez le code CSS suivant :

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

Bien que ce code fonctionne parfaitement dans la plupart des navigateurs modernes, il échoue mystérieusement dans Internet Explorer 8.

La solution

Malgré les défis posés par IE8, il est une solution de contournement pour simuler la fonctionnalité :nth-child. En tirant parti du combinateur frère adjacent ( ), vous pouvez cibler des éléments spécifiques dans une séquence :

#nav-primary ul li:first-child a {
    border-top: 5px solid red;
}
#nav-primary ul li:first-child + li a {
    border-top: 5px solid blue;
}
#nav-primary ul li:first-child + li + li a {
    border-top: 5px solid green;
}

En utilisant cette approche, vous pouvez émuler des variations de base de :ntième enfant. Cependant, des variantes plus complexes telles que :nth-child(odd) ou :nth-child(4n 3) ne peuvent pas être répliquées avec cette méthode.

Remarque : Bien que cette solution de contournement résolve le problème de En appliquant des styles à des éléments spécifiques dans une séquence, cela peut ne pas reproduire entièrement le comportement de :nth-child et pourrait entraîner des conséquences inattendues dans des scénarios plus complexes.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!