: css

Bug de la marge doublée

Sur IE6 et inférieure (c'est corrigé sur IE7), un élément flottant voit ses marges latérales doublées s'il la marge est appliquée entre le flottant et son conteneur. Le bug n'apparaît pas sur une marge appliquée entre 2 flottants.

correctif

Il y a plusieurs manières de corriger le problème.

Ajout d'un display:inline

Dans la pluspart des cas le simple fait d'ajouter le propriété display avec la valeur inline corrigera le problème. Cet ajout n'a aucun impacte sur les autres navigateurs puisqu'un élément flottant est forcément de type block.

Jouer avec les padding

Si le display:inline ne fonctionne pas, on peut alors essayer de jouer avec un padding plutôt qu'un margin; soit sur l'élément en question, soit attribuer un padding à son parent.

instructions spécifique pour IE6 et moins

Si l'on ne peut appliquer ni l'une ni l'autre des solutions ci-dessus, on pourra donner une instruction seulement pour IE6- afin de lui attribuer une marge de la moitié de la marge effective (à l'aide d'un hack, d'un commentaire conditionnel,...)

Editer