Les intégristes

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.

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 !