Comment puis-je obtenir un zébrage dans les tableaux avec nth-child() dans Internet Explorer 8 ?

Prise en charge CSS de nth-child() dans Internet Explorer 8

Dans les navigateurs modernes, l'élément CSS nth-child() est généralement utilisé pour obtenir des effets de rayures zébrées dans les tableaux. Cependant, cette fonctionnalité est notamment absente dans Internet Explorer 8. Voici comment résoudre cette limitation :

Approche Polyfill :

Selectivizr est un polyfill établi qui étend efficacement la fonctionnalité d'Internet Explorer. Prise en charge CSS. En implémentant Selectivizr, vous pouvez utiliser nth-child() dans vos styles CSS.

Sans Polyfills :

La prise en charge d'Internet Explorer 8 pour le sélecteur de premier enfant présente un opportunité d'émuler la fonctionnalité nth-child() :

/*li:nth-child(2)*/
li:first-child + li {}

Cette approche vous permet de spécifier des styles pour le deuxième élément li, efficacement imitant le comportement de nth-child(2).

Limitations :

Bien que cette astuce d'émulation fonctionne pour des sélecteurs simples comme nth-child(2), elle ne suffit pas lorsqu'il s'agit d'expressions plus complexes telles que nth-child(2n 1) ou nth-child(odd). Internet Explorer 8 n'a pas la capacité de reproduire les fonctionnalités nuancées de ces sélecteurs.

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!