Quel webmaster ne s’est jamais arraché les cheveux à cause de internet explorer, toute version confondues, que ce soit pour son modèle de boite, son affichage des png, le DOM ou encore ses bugs javascritps.

C’est pourquoi plusieurs méthodes permettent de le discipliner un peu plus : Dean Edwards s’est penchée sur ce problème et nous propose sur Google Code une bibliothèque Javascript qui permet de régler pas mal de problèmes : IE7

La blibliothèque JavaScript IE7 permet à Internet Explorer de se comporter comme un navigateur conforme aux normes. Il fixe beaucoup de problème HTML et CSS et permet l’utilisation des PNG transparents sous IE5 et IE6.

Ce script existe en 2 parfums :

IE7.js

qui upgrade IE5 & IE6 pour être compatible avec IE7.


<!--[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js" type="text/javascript"></script>
<![endif]-->

IE8.js

qui upgrade IE5 jusque IE7 avec les fonctionnalités CSS manquantes dans IE7.


<!--[if lt IE 8]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js" type="text/javascript"></script>
<![endif]-->

Si vous utilisez IE8.js, pas la peine d’inclure IE7.js

Concernant les images au format PNG

Le script ne fixe que les images nommés *-trans.png

A noter toutefois !

Le script ne permet pas encore l’utilisation de des propriétés CSS background-repeat et background-position avec les image d’arrière plan transparentes.

Autres pistes ...

une autre astuce afin de dresser IE afin qu’il puisse donner la papatte commes les autres consiste à réinitialiser le CSS pour lui.


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

Hover sur un lien, ça va....
Hover sur un autre élément, bonjour les dégâts !

Enfin Internet Explorer ne supporte pas les évènement “hover” sur des éléments autres que les liens. pour corriger ceci, vous pouvez uploader ce fichier htc à la racine de votre site internet et l’insérer comme ceci :


body { behavior:url("../htc/csshover.htc"); }

Lisez toutefois bien la page d l’auteur (en anglais), car il y a certaines choses à respecter...