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 !
{ 3 } Comments
Salut,
D’après ce que j’ai pu voir le “IE6 Multi-Class Bug” est résolu avec le script ie7.js de Dean Edward.
Bruno :
Pas complètement : http://code.google.com/p/ie7-js/issues/detail?id=9
Le script ie7.js crée dynamiquement de nouvelles classes pour les sélecteurs inconnus par IE6 :
.test.test2 –> .ie7_class0
Évidemment, des problèmes de priorité apparaissent avec ce système, et peuvent amener de nouveaux bugs difficiles à déceler.
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 accueilet si je fais
<div id="right" class="page2">pour le html de la page 2Alors 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 accueilet
<div id="rightpage2">pour le html de la page 2Alors 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.
{ 1 } Trackback
[...] que sans IE6, vous seriez plus à l’aise pour organiser vos styles. Je vous invite à relire le billet de Pierre du25/01/2008 à ce sujet pour vous en [...]
Publier un commentaire