Tous les articles

Internet Explorer 6 : ID, class et background

Par Pierre Bertet

Puisque notre vieil ami ne semble pas décidé à céder sa place de leader, nous avons largement le temps de nous intéresser à certains de ses comportements si… particuliers.

Internet Explorer 6 ne comprend pas la sélection de classes multiples en CSS : il ne prend en compte que la dernière classe.

Il est néanmoins possible d’utiliser un ID et une classe combinée sans problème :

.uneclasse.uneautreclasse{
  /* IE6 comprendra : .uneautreclasse{} */
}
#fixe.bonbon{
  /* Pas de problème */
}

Mais, d’après ce que je crois avoir compris :

Si un sélecteur « id+class » est utilisé, et qu’un autre sélecteur « id+class » définit la propriété background d’un élément, alors cette propriétée sera ignorée.

Prenons l’élément suivant :

<div id="fixe" class="bonbon"></div>

En appliquant le code CSS ci-dessous :

#fixe{background:url(image.png) no-repeat 0 0;}
#fixe.bonbon{background-image:url(image_2.png);}

L’image de fond de l’élément sera bien « image_2.png ».

Mais en appliquant le code suivant :

#fixe{background:url(image.png) no-repeat 0 0;}
#fixe.abc{}
#fixe.bonbon{background-image:url(image_2.png);}

Ce n’est plus le fond « image_2.png » qui s’affichera, mais… « image.png » !

#fixe.bonbon arrive après #fixe.abc, il n’est plus pris en compte et le premier background défini est affiché, c’est à dire celui de #fixe.

Il est en revanche tout à fait possible de cibler un élément à l’intérieur :

#fixe div{background:url(image.png) no-repeat 0 0;}
#fixe.abc div{}
#fixe.bonbon div{background-image:url(image_2.png);}

J’ai mis un bon moment à me rendre compte du problème, très particulier et (il me semble) ne portant que sur la propriété background.

Edit : rien à voir avec background, c’est juste le sélecteur qui pose problème, quelles que soient les propriétés appliquées.

On en parle ici également : IE6 Multi-Class Bug

Si vous connaissez ce problème, ou avez des précisions à apporter, ça m’intéresse !

5 commentaires

Flux RSS des commentaires de cet article

Bonjour,

Peut-être plus personne n’est intéressé par ce problème mais j ai aussi remarqué ce beug.
Alors évidemment seul IE 6 et IE7 ne sont pas OP tout les autres navigateurs comprennent…

Voila je m’explique:

Si on se retrouve à ça:

<div id="right" class="index"> pour le html de la page accueil
et si je fais
<div id="right" class="page2"> pour le html de la page 2

Alors pour le css logiquement je devrai faire ceci:

#right{Propriété du right en générale}

#right.index{ propriété spé du right à l’index}
#right.page2{ propriété spé du right à page2}

Et là pour la propriété background-image ça coince et spécialement pour cette propriété car background-color fonctionne.

Alors voilà on dit d’abord merci à IE en serrant les dents…
Et on a plus qu’à coder de cet façon

<div id="rightindex"> pour le html de la page accueil
et
<div id="rightpage2"> pour le html de la page 2

Alors dans ce cas pour le css on devra faire ceci:

#rightindex{ propriété du rightindex}
#rightpage2{ propriété du rightpage2}

et dans les deux cas on est maintenant obligé de mettre aussi le code générale du right de base qu’on voulait séparé tout au début (voir le début du post)…

Bref, en réalité ça nous fait réécrire des lignes et des lignes de codes… au lieu de rajouter juste la propriété spécifique.

Le 21 Mai. 2009 à 14h35 par Dufour

déjà rencontré ce bug par rapport au background « id + class » qu’IE6 ne comprenait pas. Ce jour là, n’ayant pas trouvé de suite une solution, j’ai codé directement sur le html (en dur). Maintenant, si je donne un background à une div et que je sais que je vais réutiliser cette div mais avec un autre background, je ne mets pas de mais une class, en fait 2. Exemples:

Le 15 Jan. 2010 à 21h09 par S.

Les commentaires sont fermés sur cet article.