Si vous développez régulièrement des sites web et utilisez des CSSs, vous avez forcément déjà été confrontés aux bugs d’Internet Explorer dans leur interprétation.
Et comme souvent en entreprise, pas possible de laisser tomber la compatibilité IE.
Voici quelques uns des soucis les plus courants sous IE :
Le modèle de boîtes
Un des bugs les plus courants d’IE : si vous déclarez le div suivant :
div#box {
width: 100px;
border: 2px solid black;
padding: 10px;
}
IE 6 affichera une boîte de 100px.
La norme CSS demande une boîte de 124px.
Une solution est de ne pas utiliser de padding et d’imbriquer plusieurs boîtes … loin d’être idéal pour la lisibilité.
La double marge
En utilisant le code suivant, les marges seront doublées sous IE 6 :
div#box {
float: right;
margin-right: 20px;
}
Vous obtiendrez une marge de 40px. Pour résoudre ce problème, ajoutez un display: inline; à la définition du div.
Pas de min-width ou min-height
Ca c’est top : IE ignore purement et simplement les min-width et min-height.
[ Une solution possible ]
Sauts de ligne après les floats
Quand vous utilisez des floats avec IE6, vous pouvez avoir la bonne blague de les voir se décaler vers le bas :
Une solution est de mettre la *line-height* du parent à 0. Plus d’informations sur cette page :
[ Preventing StepDown ]
Pas de gestion des PNGs transparents
Bon, on va arrêter là, yen a plein d’autres !
Allez faire un tour sur le site suivant, vous trouverez le détail des différents éléments et d’autres solutions !
Sans vouloir me faire l’avocat du diable, IE6 n’a pas de problème de box model tant qu’on utilise un doctype XHTML. Après tout, qui utilise encore du HTML4 ? Ah, désolé, j’avais pas bien lu « Et comme souvent en entreprise… ».
Sinon, pour le min-width, une solution consiste à utiliser une bidouille IE du style :
width:expression( document.body.clientWidth < 500? « 500px » : « 90% » );
Ca sent le vécu, ça !
Mauvaise langue, va ! 😀
Pour la hauteur/largeur minimum, j’utilise plus simple:
_height: 500px;
min-height: 500px;
Puisque le height agit comme min-height sous IE, ça fait une ligne pour IE6, une ligne pour les autres.
Tu as oublié les float qui disparaissent aussi. 😀 Heureusement les bons vieux hacks « Holy » ou « HasLayout » marchent souvent!
Par contre l’un des plus gros problème que j’ai, c’est quand on veut mettre un bandeau en position absolue qui fait toute la largeur de la page (bug du modèle de boite).
Il faut du Javascript comme Max, ou rajouter un div qui ne sert qu’à IE, comme ici http://didier.ciochetto.free.fr/exemples/position-absolue-100-ie.php :-/
Espérons qu’IE6 disparaisse vite et qu’on est plus trop à s’en soucier.