le cauchemar de tout intégrateur Web, c’est bien ce fichu internet Explorer qui ne comprend rien à rien aux CSS. Pire avec l’arrivée de IE7, on se retrouve avec 2 navigateurs traduisant votre mise en forme à leur façon.
Voici 5 astuces qui vous permettront d’améliorer la compatibilité navigateur de vos mises en forme:
1. Réinitialiser les css:
Une astuce bien pratique, c’est prédéfinir la façon dont les tous navigateurs traduiront vos style grâce à une feuille de style de base.
-
-
html, body, div, span, applet, object, iframe,
-
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
-
a, abbr, acronym, address, big, cite, code,
-
del, dfn, em, font, img, ins, kbd, q, s, samp,
-
small, strike, strong, sub, sup, tt, var,
-
b, u, i, center,
-
dl, dt, dd, ol, ul, li,
-
fieldset, form, label, legend,
-
table, caption, tbody, tfoot, thead, tr, th, td {
-
margin: 0;
-
padding: 0;
-
border: 0;
-
outline: 0;
-
font-size: 100%;
-
vertical-align: baseline;
-
background: transparent;
-
}
-
body {
-
line-height: 1;
-
}
-
ol, ul {
-
list-style: none;
-
}
-
blockquote, q {
-
quotes: none;
-
}
-
-
/* remember to define focus styles! */
-
:focus {
-
outline: 0;
-
}
-
-
/* remember to highlight inserts somehow! */
-
ins {
-
text-decoration: none;
-
}
-
del {
-
text-decoration: line-through;
-
}
-
-
/* tables still need ‘cellspacing="0"’ in the markup */
-
table {
-
border-collapse: collapse;
-
border-spacing: 0;
-
}
-
2. Ajouter le support du png à Internet Explorer 6,
pour cela vous pouvez ajouter ce script htc et l’insérer comme ceci:
-
-
img, h1, .class-with-png-background-image {
-
behavior: url(../htc/iepngfix.htc);
-
}
-
3. Le CrossHover:
IE ne supporte pas les évènement “hover” sur des éléments autres que les liens. Vous pouvez aussi corriger ceci avec le script crosshover htc et l’insérer comme ceci:
-
-
body { behavior:url("../htc/csshover.htc"); }
-
4. Donner de la mise en page à vos éléments
Le bug le plus courant d’IE est sa gestion du “layout”. En effet, il a toujours besoins de générer un “bloc” autour de l’élément, ce qui peut être très génant lors des mise en colonne. Voici la liste des propriétés CSS qui annulent le layout.
-
-
position: absolute [IE 6 & 7]
-
float: left [IE 6 & 7]
-
float: right [IE 6 & 7]
-
display: inline-table [IE 6 & 7]
-
any width or height value [IE 6 & 7]
-
zoom [IE 6 & 7]
-
min-width [IE 7]
-
max-width [IE 7]
-
min-height [IE 7]
-
max-height [IE 7]
-
overflow [IE 7]
-
5. Éliminez le bug de la “double marge”
IE 6 a tendance à doubler les marges de chaque élément qui a été assigné au flot et marge de gauche / droite marge.
Pour surmonter ce problème, il suffit de fixer display: inline sur l’élément incriminé.
-
-
display: inline;
-
Sympa comme article, vraiment utile, surtout le coup du CrossHover, je savais pas qu’il existait une solution (je n’avais pas vraiment cherché en fait, j’avoue)
Merci Chris