Corriger un problème d’affichage sous IE 6 et 7

Bien qu’Internet Explorer 7 ne représente que 10% du marché et que IE 6 2%, nous sommes obligés de composer avec pour toute les entreprises qui utilisent la version native d’XP. Internet Explorer développé sous une technologie trident répond bien aux CSS 1 et 2. Mais les interprètes selon ses propre critères. Lors de la conception de votre page web : il est important en cas de problème sous IE de vérifier les éléments ci-dessous. Généralement cela suffit en cas de problèmes d’affichage mineur.

1- le Doctype : il résout 80% des problèmes.
sources
HTML4.01 Strict, Transitional, Frames et XHTML 1.0 Strict, Transitional, Frames sont pris en charge par IE 6 et 7
Internet Explorer ne prends pas en charge le HTML 5.

2 – Les margin et padding mettre en style dédié
sources
IE a la fâcheuse tendance à ajouter des pixels et d’en soustraire d’autre de manière aléatoire.
Utilisez toujours de préférence margin, et appliquez les hack pour rectifier les petits défauts.
Quelquefois, il vous faudra carrément appliquer des marges négatives pour obtenir le résultat souhaité.
Exemple :

 margin-left:-15px;

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
Exemple :

 -margin : 5px ;

Pour qu’un style css ne soit appliqué exclusivement qu’à IE6 et IE7, il suffit de mettre le signe /, ? ou *devant
Exemple :

 /margin : 7px ;

Pour qu’un style css ne soit appliqué qu’à FireFox (NB : et presque tous les autres navigateurs comme NETSCAPE ou OPÉRA qui ont une part de marché moindre), il suffit de mettre le commentaires !important aprés.
Exemple :

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;}

3 – la div en float, le bug de la bordure

Vous avez indiqué une bordure pour un style et elle n’apparaît 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.

4 – mettre un hack
sources
Syntaxe de base :

<!–[if <span pre= »if « >IE]> Ici votre code HTML réservé à IE. < ![endif]–>

L’exemple le plus simple de commentaire conditionnel est le suivant :
Mais ce n’est pas le plus propre pour faire valider votre css par le w3c
Rappel: un commentaire conditionnel ne peut être inséré que dans un document (X)HTML,

et ne peut contenir que des instructions (X)HTML et non CSS.
Exemple d’utilisation :

<!–[if <span class= »hiddenSpellError » pre= »if « >IE]>

<link type= »text/css » rel= »stylesheet » href= »styles-ie.css » /> < ![endif]–>

<!–[if IE]>

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.