Tout d’abord on met les marges et paddings à zéro pour toutes les balises en ajoutant en début de feuille de style : *{margin: 0; padding : 0;}. L’attribut * remplace tous les caractères et s’applique donc à toutes les balises.
Pourquoi ? Parce que chaque navigateur dispose de sa propre feuille de style par défaut.
Faire d’abord son site pour Firefox
C’est l’un des navigateurs les plus utilisés et il respecte mieux les standards CSS qu’Internet Explorer. Ainsi votre site respectera au mieux les normes et il ne restera plus qu’à appliquer différents HACKS, aux « mauvais élèves ».
Ensuite isoler le style qui ne s’affiche pas bien et le corriger
Pour cela on peut appliquer une feuille de style différente pour Internet Explorer grâce aux commentaires conditionnels :
<!--[if IE]> Ne sera lu que par les navigateurs Internet Explorer <link rel="stylesheet" type="text/css" href="/css/ie6.css" mce_href="/css/ie6.css" /> <![endif]--> <!--[if IE 6]> Ne sera lu que par Internet Explorer 6 <![endif]--> <!--[if gte IE 5]> Ne sera lu que par les navigateurs Internet Explorer de versions 5 et postérieures <![endif]--> <!--[if lt IE 6]> Ne sera lu que par les navigateurs de versions strictement antérieures à Internet Explorer 6 <![endif]--> <!--[if lte IE 6]> Ne sera lu que par les navigateurs Internet Explorer de versions antérieures ou égal à 6 <![endif]--> <!--[if gt IE 6]> Ne sera lu que par les navigateurs Internet Explorer de versions strictement supérieures à 6 <![endif]-->
Ou on peut appliquer un hack directement dans la feuille de style principale :
*html devant n’importe quelle balise, classe, ou id n’est lu que par Internet Explorer de versions 6 et inférieures
exemple = *html #test{margin:10px;} ne sera lu que par Internet Explorer de versions 6 et antérieures
IE 6 et antérieures
Utiliser * html {}
IE 7 et antérieures
Utiliser *+html, * html {}
IE 7 seulement
Utiliser *+html {}
IE 7 et navigateurs modernes seulement
Utiliser html>body {}
Navigateurs modernes seulement (IE 7 non inclus)
Utiliser html>/**/body {}
Astuce : pour isoler les problèmes de marges on peut mettre un fond de couleur à l’élément pour bien le voir.
Hack !important
La propriété !important n’est pas lu par Internet Explorer en versions 6 et antérieures, c’est donc un hack de plus pour corriger les bugs d’IE6.
Exemple :
#contenu {
margin-left:50px!important;
margin-left:47px; /*pour IE6 et antérieures*/
}
