Le bug css ie du double float-margin

Cette page est librement inspirée de la page « The IE Doubled Float-Margin Bug » du site anglais positioniseverything.net. 

Il existe un bug css sous Internet Explorer qui peut vous causer quelques ennuis.
Ce bug concerne les paramêtres css de la marge qui est anormalement doublée dans certains cas.
Il s’agit typiquement d’un bug casse-pompom qui peut vous faire perdre un temps monstrueux s’il n’est pas connu au moment de votre mise en page.

Ce qui ne va pas

Un développeur place innocemment un float css gauche dans une cadre (élément html div) et utilise une marge gauche sur le cadre pour le pousser du côté gauche du récipient. Ca semble assez simple, hein ? Hé bien, ca l’est jusqu’à ce que vous le regardiez dans l’Explorateur pour Windows. Dans ce navigateur, la marge gauche du cadre a mystérieusement doublé de longueur !

Ce que ça devrait être

L’image au-dessous vous montre un div simple (le carré fauve) contenant un cadre aligné à gauche (le carré vert) . Le carré vert a une marge gauche de 100 pixels, produisant un trou de 100 pixels entre le bord gauche du rectangle fauve et du bord gauche du carré vert. Jusqu’ici tout va bien.

marg-norm.jpg

.floatbox { 
   float : left; 
   width : 150px; 
   height : 150px; 
   margin : 5px 0 5px 100px; 
 /*C'est la dernière valeur qui indique 100px de marge à gauche */ 
}

Tel que celà s’affiche sur Internet Explorer

Cet exactement le même code css vu par Internet Explorer : Il est affiché d’une façon différente . L’image ci-dessous  montre ce que Internet Explorer fait de la marge. 

marg-doubled.jpg

Pourquoi celà arrive-t-il ?

Ne posez pas des questions aussi stupides! Vous rappelez-vous que c’est IE  ? Le respect des normes ne peut être qu’espéré, pas attendu. Ce qui est important c’est ce qui arrive vraiment.

Points Importants

Ce bug se produit seulement quand la marge de l’élément « float » est dans la même direction que l’élément lui-même et est piégée directement entre l’élément et le bord intérieur de l’élément. N’importe quel suite d’éléments avec une marge semblable ne montrera pas la marge doublée. Seulement le premier flotteur dans n’importe quel rang de flotteur donné souffrira de l’insecte. Aussi, la marge doublée affiche la symétrie, en travaillant la même voie vers la droite qu’il fait vers la gauche.

Enfin, il est fixé !

Jusqu’en janvier 2004, ce bug a été infixable et était généralement contrôlé en remplaçant la marge défectueuse avec une bourre gauche sur un flotteur non-visible, avec une boîte intérieure nichée pour servir de la boîte visible dans le flotteur invisible, ou en tailladant une moitié de la valeur de marge pour IE seulement. Ca fonctionne, mais ca salit le code source. C’est partout  Ok maintenant.

Steve Clason a trouvé comment corriger ce bug en rajouter la propriété inline de la manière suivante :

.floatbox { 
   float : left; 
   width : 150px; 
   height : 150px; 
   margin : 5px 0 5px 100px; 
   display : inline; 
 /*C'est la dernière valeur qui indique 100px de marge à gauche */ 
}

Et ca suffit ! Et ca fonctionne partout !

Parisienne femmes capitales

Publicités

2 Responses to Le bug css ie du double float-margin

  1. JB dit :

    Merci pour l’astuce, je voyais bien le problème mais pour le comprendre… en tout cas tu viens de me dépanner et je prend bien note de ceci !
    +++
    JB

    ___________
    Linux ? Il y a moins bien, mais c’est plus chère… 🙂

  2. benoit dit :

    Merci ! J’ai perdu 2 bonnes heures ! Et pas plus grâce à toi…
    Benoît

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion /  Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion /  Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion /  Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion /  Changer )

Connexion à %s

%d blogueurs aiment cette page :