web-dev-qa-db-fra.com

premier enfant et dernier enfant avec IE8

J'ai quelques css pour ajuster les choses dans mon tableau.

C'est ici:

.editor td:first-child
{
    width: 150px; 
}

.editor td:last-child input,
.editor td:last-child textarea
{
    width: 500px;
    padding: 3px 5px 5px 5px;
    border: 1px solid #CCC; 
}

Cela fonctionne avec Firefox, Safari et Chrome mais pas (pour le moment) avec IE8.

Je sais que le problème vient du premier et du dernier enfant, mais je ne suis pas un expert.

Une idée de comment je peux le fixer?

PS: j'ai ajouté <!doctype html> sur mon document html mais rien n’a changé.

cssinternet-explorer-8css-selectors
60
Bronzato

Si votre table ne comporte que 2 colonnes, vous pouvez facilement atteindre le deuxième td avec le sélecteur frère associé, que IE8 prend en charge avec :first-child:

.editor td:first-child
{
    width: 150px; 
}

.editor td:first-child + td input,
.editor td:first-child + td textarea
{
    width: 500px;
    padding: 3px 5px 5px 5px;
    border: 1px solid #CCC; 
}

Sinon, vous devrez utiliser une bibliothèque de sélecteurs JS telle que jQuery ou ajouter manuellement une classe au dernier td, comme suggéré par James Allardice .

68
BoltClock

Puisque :last-child est une pseudo-classe CSS3, elle n’est pas prise en charge dans IE8. Je crois :first-child est pris en charge, tel que défini dans la spécification CSS2.1.

Une solution possible consiste simplement à donner au dernier enfant un nom de classe et un style à cette classe.

Une autre serait d'utiliser JavaScript. jQuery rend cela particulièrement facile car il fournit un :last-child pseudo-classe qui devrait fonctionner dans IE8. Malheureusement, cela pourrait entraîner un éclair de contenu non-stylé pendant le chargement du DOM.

34
James Allardice

Si vous souhaitez continuer à utiliser les sélecteurs CSS3 mais que vous devez prendre en charge des navigateurs plus anciens, je vous suggérerais d'utiliser un polyfill tel que Selectivizr.js

3
blues_driven