Pour positionner un élément en CSS, on utilise très facilement float [1] agrémenté d’un margin pour le tenir à distance respectable. Par exemple :
<div style="float: right; margin-right: 23px;">
Bloc flottant à droite,
avec une marge droite de 23 pixels.
</div>Ce qui produira l’affichage suivant (à quelques couleurs prés) :
Mais tout se gâte avec Internet Explorer, le navigateur de Microsoft, où le même code produit un affichage différent :
Au lieu de positionner correctement le bloc à 23 pixels du bord, IE le décale excessivement et, dans certains cas l’envoie même se balader en dessous de tout. Pourquoi ? IE double mystérieusement la valeur de la marge.
Notons que ce bug ne se produit que sous IE pour Windows, avec un float et un margin de mêmes directions (ici right). Ouf, c’est déjà ça de gagné !
Comment remédier à ce bug IE ?
Première solution : recoder à part pour IE/Win, en divisant la marge par deux. C’est ce que j’ai d’abord fait dans un premier temps, surchargeant ma feuille de style externe de hacks spéciaux pour IE/Win, de ce genre :
div { float: right; margin-right: 11px; }
*> div { margin-right: 23px; }On déclare les propriétés nécessaires, mais avec la marge divisée par deux, sachant qu’IE/Win va la doubler. Puis on indique la valeur correcte, après le sélecteur > non reconnu par IE/Win. Avons-le, c’est très laid. De plus, dans mon exemple, 23 n’étant pas divisible par deux, le positionnement devient aproximatif sous IE/Win (à un pixel près, certes, mais ce n’est tout de même pas très sérieux).
Seconde solution : placer le float et le margin sur des éléments différents. Dans l’ensemble d’une mise en page, on peut parfois s’arranger avec les autres éléments pour répartir les float et leurs espacements sur des blocs différents. Sinon, vous en êtes réduite à surcharger votre code en rajoutant une div englobante, de cette façon :
<div style="float: right;">
<div style="margin-right: 23px;">
Bloc flottant à droite,
avec une marge droite de 23 pixels.
</div>
</div> Troisième solution : ajouter display: inline; à l’élément flottant :
<div style="float: right; margin-right: 23px; display: inline;">
Bloc flottant à droite,
avec une marge droite de 23 pixels.
</div>Normalement, la propriété display est ignorée (sauf si sa valeur est none) sur les éléments flottants, qui sont nécessairement de type block [2]. Cela a cependant un effet sous IE, qui cesse mystérieusement de doubler la marge.
Cette dernière solution, pour si efficace qu’elle soit, n’en reste pas moins imparfaite. Elle peut poser problème dans certains cas, par exemple pour construire une liste horizontale.
Vos commentaires
1. Le 5 décembre 2006 à 15:04, par Igor
En réponse à : Quand ça flotte, IE voit double
Bonjour Romy,
Plutôt que faire ce vilain hack ;-), il faut mieux utiliser les commentaires conditionnels pour tous ces problèmes avec IE.
2. Le 20 décembre 2006 à 12:28, par Romy Têtue
En réponse à : Quand ça flotte, IE voit double
Oui, aussi. Mais attention, ces commentaires conditionnels se placent, non pas dans la feuille de style CSS, mais dans la page HTML. Par exemple :
Ça sous-entend donc soit de faire des feuilles de styles externes différentes, soit de coder le CSS dans la page HTML, ce qui n’a pas ma faveur.
Pour filtrer le navigateur directement dans la feuille de style, voici quelques hacks CSS (par ultra-fluide).
3. Le 21 décembre 2006 à 15:19, par Igor
En réponse à : Quand ça flotte, IE voit double
Lorsque je les utilise j’appelle une feuille externe par les commentaires conditionnels avec les correctifs pour la ou les versions d’IE posant problème :
4. Le 15 décembre 2007 à 19:41, par Marco
En réponse à : Quand ça flotte, IE voit double
Franchement bien sympa l’histoire du display ça m’a sauvé la mise je te remercie ;D
5. Le 30 mai 2008 à 12:23, par Ariakan
En réponse à : Quand ça flotte, IE voit double
Juste un petit message pour dire merci !
Je vérifiais mon design sous Firefox, IE7, Safari 3, Opéra 9 et....IE6 qui buggait.
Maintenant je connais le pourquoi du comment !
6. Le 13 juin 2008 à 11:40, par Manar
En réponse à : Quand ça flotte, IE voit double
j’aime bien ce truc de condition IE, on peut faire dns le même css deux classes par exemple(float et float_ie) et faire appel à l’une ou l’autre :
7. Le 15 décembre 2008 à 11:46, par BobDole
En réponse à : Quand ça flotte, IE voit double
non c’est meme tres vilain
vilain vilain !
Répondre à cet article
Suivre les commentaires :
| 