Internet Explorer 6 est souvent difficile à contrôler et un jeune webmaster peu vite être dérouté par les différences d'affichage qu'il pourra constater entre Internet Explorer 6 (IE 6), Internet Explorer 7 (IE7) et FireFox (FF). Je vais commencer par vous donner quelques conseils pour éviter un maximum de bugs, puis je vais établir ci-dessous une liste des bugs rencontrés sur Microsoft Internet Explorer 6 et le cas échéant la solution à appliquer. J'ajouterai au fur et à mesure de mes heureuses surprises. Pour m'y encourager, laissez-moi un commentaire ou cliquez sur une bannière si cet article vous a aidé !
A. Quelques conseils avisés
1# Bien renseigner son doctype
Essentiel à la bonne compréhension de votre code, le doctype va donner une clé à IE 6 pour interpréter votre code HTML. En l'absence de Doctype, IE passe en mode QUIRKS et point de vue affichage c'est la catastrophe !
Le DOCTYPE se place tout en haut de votre page HTML. C'est la toute première ligne de votre code.
Ex:
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >
L'importance va être de choisir le doctype adapté. Ne choisissez pas un doctype strict si vous débutez en html/css. Préférez-lui un doctype de type transitionnel. L'intérêt n'est pas de frimer en indiquant un doctype que vous ne saurez pas respecter, mais de permettre aux navigateurs de comprendre au mieux votre code.
Plus d'informations : Lire l'excellent article de Pompage.net
2# Valider son code HTML et son CSS
La plupart des différences d'affichage provienne de petites erreurs d'inattentions dans votre code HTML ( balise mal fermée, non-respect de l'imbrication...) ou dans votre css (oubli d'un point virgule ou d'une accolade).
Pour vous permettre de vérifier rapidemment votre code et de le rendre conforme, vous pouvez utiliser :
- ce validateur ( en français )
- le validateur de la W3C ( en anglais )
3# Bien utiliser les hack css
Si malgré tous vos efforts, il reste toujours de divergences, vous pouvez appliquer des correctifs que vous trouverez plus couramment sur le net sous le nom de hack css.
Pour qu'un style css ne soit appliqué exclusivement qu'à IE6, il suffit de mettre le signe - ou _ devant .
Ex : -margin : 5px ;
Pour qu'un style css ne soit appliqué exclusivement qu'à IE6 et IE7, il suffit de mettre le signe /, ? ou *devant .
Ex : /margin : 7px ;
Pour qu'un style css ne soit appliqué qu'à FireFox (NB : et presque tous les autres navigateurs comme NETSCAPE ou OPERA qui ont une part de marché moindre), il suffit de mettre le commentaires !important après.
Ex : margin : 9px !important ;
Comme les styles s'appliquent en cascade, si vous avez besoin d'appliquer un style différent à chacun des navigateurs, faites comme dans l'exemple suivant :
margin: 9px !important;
/margin: 7px;
-margin: 5px;
D'abord Firefox, puis IE 7 , puis IE6.
Enfin, petite nouveauté 2008, pour appliquer un hack css à Firefox 3, il faut ajouter les définitions x-moz-any-link à votre élément. Par exemple, si vous avez une div #menugauche à laquelle vous souhaitez appliquer une marge de 9px
#menugauche, x:-moz-any-link, x:default {margin : 9px;}
B. Liste non-exhaustive des mauvaises surprises qui vous attendent sur ie6 et ie7
1# Les bugs dus aux margin et padding
IE a la facheuse tendance d'ajouter des pixels et d'en soustraire là où ça lui chante. Utilisez toujours de préférence margin, et appliquez les hacks pour rectifier les petits défauts. Quelquefois, il vous faudra carrément appliquer des marges négatives pour obtenir le résultat souhaité
ex: margin-left:-15px;
2# Le bug de la div en float, le bug de la bordure
Vous avez indiqué une bordure pour un style et elle n'apparait pas sous ie6 mais sur les autres navigateurs tout fonctionne, ou encore, vous avez appliqué un float à une div et celle-ci ne marche pas... il existe une solution.
Je ne connais la raison, mais en appliquant un position:relative à une div défaillante, souvent les problèmes s'envolent. A tester donc, en premier lieu, avant d'envoyer un mail d'insultes à Bill Gates.
3# Le background ne s'affiche pas
Il y a quelquefois des images d'arrière-plan ou des couleurs qui refusent de s'afficher sur ie6. La plupart de vos problèmes seront solutionnés comme par miracle en appliquant à IE6 ceci :
-height:1%;
ou
/height:1%; (si le problèmes est aussi présent sur ie7)
Encore un antidote miracle qui pourra vous servir en diverses occasions.
4# Lorsque j'enlève la bordure, tous se décale
Vous aviez mis une bordure puis vous avez décidé d'abandonner l'idée, mais tout se décale quand vous l'enlevez ?
Il vous suffit de garder la bordure en indiquant border : 0px solid ;
Elle n'apparaitra plus et le bug non plus.
5# Le min-width ne fonctionne pas
Min-width, max-width, min-height, max-height font partie des valeurs que ie6 ne comprend pas. Inutile d'essayer de les appliquer il ne les interprète pas.
Heureusement, vous arriverez à passer outre avec ce hack :
min-height:800px;
height:auto !important;
height:800px;
Vous n'avez plus qu'à adapter ce code à vos besoins...
6# Et les PNG transparents ?
Pour IE 6, le PNG n'est pas transparent et il affiche un fond grisatre des plus inesthétiques.
Pour pallier à ce problème, vous avez deux options :
- toujours préférer le format gif, qui est libre depuis 2006.
- intégrer un fichier .htc qui va permettre d'emuler ie6 pour qu'il comprenne le png transparent.
7# Et le comportement Hover ?
IE 6 connait le comportement :hover quand il est appliqué à la balise a.
Il appliquera donc un effet de survol à un style définit par a:hover.
Mais si vous décidez d'appliquer un effet de survol à un autre élément, misère, ça ne marche plus...
La solution vient elle aussi d'un fichier .htc qui va expliquer à IE ce qu'il faut faire.
N'oublier pas d'appeler le fichier avec l'élément behavior !
8# J'ai un style appliqué à plusieurs images et IE6 ne l'applique qu'à la première :
Vous avez réalisé une belle mise en page et donné un style à vos
images, mais votre style qui s'applique correctement partout, s'arrête
à la première image sous IE6.
Nous avons affaire cette fois à une application à la lettre des normes W3C d'IE6, qui n'applique un style défini par un identifiant : id="" qu'au premier élément.
En effet, pour IE6, un id est UNIQUE, donc il n'applique l'ID qu'une seule fois.
La solution est toute simple, changez dans votre html vos ID= par des
CLASS= , et n'oubliez pas de changer également le code CSS !
9# Mes puces de liste disparaissent quand je bouge l'ascenceur / ou ma puce n'est pas à la bonne place / ou mes puces disparraissent au survol de la souris :
CAS n° 1 : Ce bug concerne ie 6 et ie 7
Vous avez fait une liste avec < ul > < li >, et utilisé un list-style-image pour définir l'image de la puce. Tout fonctionne sous FF mais sous IE, c'est la cata, les puces disparaissent quand vous passez la souris dessus ou si vous touchez à l'ascenceur vertical.
Malheureusement, IE 6 (& 7) interprètent très mal le changement d'image de puce avec le list-style-image. Il faut donc contourner cette propriété CSS en utilisant un background :
li{
list-style-type: none;
background:url(images/puce.jpg) center left no-repeat;
padding-left: 15px;
}
Et voilà, vos puces fonctionnent de façon identique sur IE et Firefox !
Pensez à utiliser ce code de façon systématique et ranger le list-style-image dans un tirroir en attendant que IE s'affranchissent de ses bugs.
Si vous avez toujours un souci, lisez la suite :
Cas n° 2 : Ce bug concerne UNIQUEMENT IE 6
Vous avez testé et tout fonctionne sur ie7 mais sur ie6, on dirait qu'il recharge tout de même les images au survol de la souris?
Faites ce petit test :
Regardez dans IE6, dans Outils>Options Internet>Général>Fichiers temporaires >Paramètres.
Avez-vous cocher "A chaque visite de la page" ?
Si oui, cochez n'importe quel autre paramètre et faites un refresh (F5) de la page.
Si le bug a disparu, c'est que vous êtes face à un FLICKER bug. Tellement fréquent qu'il a un petit nom. Votre image est placée sur un lien et ie a décidé de vérifier cette image à chaque survol.
Voici une solution en javascript qui vous permettra de corriger le bug (mais qui ne fonctionnera pas si le javascript est désactivé!)
Néanmoins, il peut arriver que ce patch ne fonctionne pas... ne vous inquiétez pas. IE6 n'est pas réglé sur "a chaque visite" par défaut. Aussi les seuls utilisateurs ie6 (en majorité néophites en webmastering) n'auront pas modifié cette option. Et pour les autres, comme vous, ils utilisent déjà tous Firefox non ?
10# Le bug de la lightbox avec IE7
Vous avez installé une lightbox et vous ne comprenez pas pourquoi elle fonctionne parfaitement sous FF, sous ie6 et pas sous ie7 ?
Vous avez trouvé la réponse : si comme moi, vous avez copié-collé la ligne de code proposée (dans le html du dossier de download officiel) pour lier le css de la lightbox à votre page html,
vérifiez votre balise link et regardez où se trouve rel="stylesheet". Si elle se trouve avant l'attribut href : déplacez-là juste après ainsi:
href="lightbox.css" rel="stylesheet"
Et voilà, les bugs d'affichage de la lightbox s'envolent comme par magie.
11# Le bug du survol d'un lien contenant quelquechose ( a:hover quelquechose)
Vous avez utilisé le comportement hover sur un lien pour faire apparaître un texte inclus dans ce lien ?
avec par exemple un a:hover span, ou a:hover p ...
mais celui-ci n'apparaît pas ?
Voici un petit bout de code à ajouter qui va solutionner votre problème :
a:hover{
background:none;
}
-------------------------------------------------------------------------------------------------
Laissez-moi un commentaire ou cliquez sur une bannière pub pour m'encourager si cet article vous a aidé où si vous avez besoin d'aide pour un bug non-repertorié !
(Dernière mise à jour : 17 février 2008)
® Esprit Créatif 2007 - Tous droits de reproduction réservés | 
Esprit Créatif est une entreprise de créations graphiques à Strasbourg. Soutenue par le Conseil Régional d'Alsace,elle propose des sites internet sur mesure destinés aux professionnels comme aux particuliers. Elle s'est spécialisée dans le webmastering 2.0 en s'adaptant aux standards W3C, aux normes WAI et à l'utilisation de CSS.
