web-dev-qa-db-fra.com

Comment utiliser Internet Explorer 8 pour prendre en charge le nth élément CSS child ()?

Je veux donner un effet de bande de zèbre à mes lignes de table. Dans tous les autres navigateurs, il est possible d’utiliser l’élément enfant CSS nth. Mais je veux le faire IE 8 également. SO comment puis-je le faire?

cssinternet-explorer-8compatibilitycss-selectorsie8-compatibility-mode
24
surajR

Vous pouvez utiliser http://selectivizr.com/ JS qui prend en charge le sélecteur css3 pour IE.

25
sandeep

Avec polyfill: Selectivizr est assez bon.

Sans polyfill: comme IE8 prend en charge le premier enfant, vous pouvez le tromper pour prendre en charge le nth-enfant dans iE8,

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

Bien que nous ne puissions pas émuler de sélecteurs complexes tels que nième enfant (2n + 1) ou nième enfant (impair) pour IE8.

57
Samar Panda

Au lieu de Selectivizr, vous pouvez utiliser un peu de jQuery:

$('.your-list li:nth-child(3n+1)').addClass('nth-child-3np1');

Ensuite, ajoutez simplement un deuxième sélecteur dans votre CSS:

:nth-child(3n+1)
{
    clear: both;
}

.nth-child-3np1
{
    clear: both;
}
36
Jonathan

Les sélecteurs 'first-child' et '+' sont tous deux disponibles dans IE7, et le '+' est additif.

Par conséquent, le «nième enfant» peut être simulé en ajoutant successivement des sélecteurs «+», de sorte que:

tr:nth-child(4)

devient:

tr:first-child + tr + tr + tr

Si tous les éléments frères sont identiques, le caractère générique '*' suffira, comme dans:

tr:first-child + * + * + *

ce qui réduira la taille du fichier css si vous spécifiez beaucoup de lignes.

Notez que les espaces entre les sélecteurs ne sont pas obligatoires, vous pouvez donc réduire davantage la taille du fichier en les laissant de côté. Sélectionnez donc les première, troisième et cinquième lignes:

tr:first-child,tr:first-child+*+*,tr:first-child+*+*+*+*

Bien sûr, on ne voudrait pas recevoir de très grandes tables!

Si vous utilisez le * en tant que remplissage, assurez-vous que l'élément :first-child et le dernier élément reçoivent le nom explicite, car la règle sera testée par rapport à chaque élément du DOM, et la spécification de ces deux éléments force explicitement l'échec à la fin Le navigateur applique ses règles en premier, plutôt que d’échouer après avoir dû enjamber plusieurs éléments dans chaque séquence pour finalement faire échouer la règle pour chacun d’eux. Ne faites pas fonctionner votre navigateur sans bonne raison!

1
Patanjali