Comment réparer CSS pour qu'il fonctionne dans IE7 et IE8?

Question

J'utilise les styles ci-dessous pour afficher dynamiquement d'autres couleurs à partir de mon code HTML, mais ces styles ne fonctionnent pas dans IE7 et IE8. Tout fonctionne depuis IE9 ci-dessus. Je suis venu à connaître ces styles pas compatible pour IE7 & 8.

Pouvez-vous s'il vous plaît montrer d'autres méthodes en CSS afin qu'ils fonctionnent dans IE7 et au-dessus?

table.idclass tbody tr:nth-child(2n) td { 
    background-color: red; 
} 

table.idclass tbody tr:nth-child(2n+1) td { 
    background-color: blue; 
} 

table.idclass thead tr th:not(.innerclassid) after { 
    content: "\25C0\25C0"; 
} 

Answer 1

Cela devrait vous aider à http://codepen.io/anon/pen/PZoBYa nous manipulons essentiellement des choses par js. L'idée est de parcourir les éléments en ajoutant bg/class en vérifiant si l'enfant est pair ou impair. Car après, js est sans défense si nous créons une classe « après » et les ajouter

elem = $('div'); 

for(i=0;i<elem.length;i++){ 
    bg = (i%2 == 0) ? 'red' : 'blue'; 
    $(elem[i]).css('background',bg); 
    if(!$(elem[i]).hasClass('inner'))   
     $(elem[i]).addClass('afterContent'); 
} 

Answer 2

Ni Ni, ni :nth-child:not travail dans les deux IE8 ou IE7. Dans la plupart des cas où vous utilisez ces sélecteurs, si vous devez prendre en charge IE7/IE8, il vous suffit de réécrire votre code HTML pour que tout ce que vous devez sélectionner avec ces sélecteurs ait une classe ou un ID que vous pouvez sélectionnez directement. Par exemple, ajoutez les classes odd et even aux lignes de table. C'est généralement la solution la plus sensée.

Si vous ne pouvez absolument pas réécrire le code HTML, la meilleure solution consiste à utiliser un script polyfill. Le meilleur à utiliser est Selectivzr. Ajoutez ce script (avec JQuery si vous ne l'avez pas déjà), et il ajoutera le support de ces sélecteurs aux vieilles versions d'IE. Ce script fonctionne généralement bien; Cependant, cela peut avoir des implications sur les performances de votre site, et il y a des caprices, par exemple, prenez garde d'essayer d'utiliser les sélecteurs n HTML qui sont dynamiques et mis à jour par JavaScript. Assurez-vous de bien tester.

Une autre option est "graceful fallback". Tant que votre CSS a des valeurs par défaut raisonnables lorsque ces sélecteurs ne fonctionnent pas, cela n'a même pas d'importance. Par exemple, si vous utilisez :nth-child pour mettre en surbrillance d'autres lignes dans un tableau, est-ce vraiment important si les utilisateurs IE8 voient toutes les lignes de la même couleur? Assurez-vous simplement que les valeurs par défaut sont raisonnables, et cela devrait suffire.

Enfin, arrêtez-vous et demandez-vous à nouveau si vous avez vraiment besoin de pour prendre en charge IE7 et IE8. Ces versions d'IE sont très vieilles maintenant et ont très les taux d'utilisation bas. Avant de travailler, tenez compte du nombre d'utilisateurs que cela affectera et de la nécessité de faire le travail nécessaire.