Comment pouvez-vous utiliser nth-child() dans Internet Explorer 8 ?

Surmonter le manque de prise en charge CSS nth-child() d'Internet Explorer 8

En CSS, le sélecteur d'élément nth-child() vous permet pour cibler des éléments enfants spécifiques au sein d’un élément parent. Toutefois, ce sélecteur n'est pas pris en charge dans Internet Explorer 8 (IE8). Cela peut être un défi lorsque vous souhaitez obtenir des effets tels que des rayures zébrées dans les tableaux.

Solution

Il existe deux approches principales pour résoudre ce problème :

1. Utiliser un Polyfill

Les polyfills sont des scripts qui ajoutent des fonctionnalités manquantes aux navigateurs. Pour CSS, Selectivizr est un polyfill populaire qui prend en charge nth-child() dans IE8.

2. Astuce IE8 avec First-child

Puisque IE8 prend en charge le sélecteur de premier enfant, vous pouvez l'utiliser pour créer une solution de contournement pour nth-child() :

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

Cette méthode incitera IE8 à sélectionner le deuxième élément enfant. Cependant, il a des limites et ne peut pas émuler des sélecteurs nth-child() plus complexes comme nth-child(2n 1) ou nth-child(odd).

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!