Compatibilité entre IE5, IE6, IE7, IE8 : LA solution

Beaucoup de développeur web se prennent souvent la tête avec internet explorer 5, internet explorer 6, internet explorer 7 et même, la toute nouvelle monture de Microsoft, je cite internet explorer 8.

Je me suis moi même cassé les dents plusieurs fois sur l'incompatibilité d'un simple code entre toutes ces versions d'internet explorer... Toute fois il existe une solution pour contourner ce problème...

Les commentaires conditionnels ! En effet avec les commentaires conditionnels nous allons pouvoir changer la feuille de style css en fonction de la version du navigateur et pour cela, rien de bien compliquer, voyez plutôt :

<div>
<!--[if IE]>Vous utilisez Internet Explorer<![endif]-->
<!--[if !IE]-->Vous n utilisez pas Internet Explorer<!--[endif]-->
<!--[if IE 8]>Vous utilisez Internet Explorer 8<![endif]-->
<!--[if !(IE 8)]>Vous n utilisez pas Internet Explorer 8<![endif]-->
<!--[if gte IE 7]>Vous utilisez Internet Explorer 7 ou plus<![endif]-->
<!--[if IE 6]>Vous utilisez Internet Explorer 6<![endif]-->
<!--[if (IE 5)]>Vous utilisez Internet Explorer 5 (Toutes versions confondus)<![endif]-->
<!--[if (gte IE 5.5)&(lt IE 7)]>Vous utilisez Internet Explorer 5.5 ou 7<![endif]-->
<!--[if lt IE 5.5]>Vous utilisez une version inférieur à Internet Explorer 5.5 (Faudrait peut être se mettre à jour de temps en temps... :D)<![endif]-->
</div>

De ce fait il ne vous reste plus qu'a avoir votre feuille de style propre à tous les navigateurs, puis dans d'autres feuilles de styles, pour les navigateurs qui interpretent mal votre code ( Internet Explorer quoi... Quoi ? Ça ? Un troll ? NON !!!! ).

<!--[if IE 6]>
<link rel=`stylesheet` type=`text/css` href=`/style-ie6.css` _mce_href=`/style-ie6.css` media=`screen, projection` />
<![endif]-->
<!--[if IE 7]>
<link rel=`stylesheet` type=`text/css` href=`style-ie7.css` _mce_href=`style-ie7.css` media=`screen, projection` />
<![endif]-->
<!--[if IE 8]>
<link rel=`stylesheet` type=`text/css` href=`style-ie8.css` _mce_href=`style-ie8.css` media=`screen, projection` />
<![endif]-->

Sachez toute fois qu'il est inutile de re-déclarer tous les éléments de votre feuille de style principal, mais seulement les éléments à modifier. Bien entendu votre feuille de style principale doit être placée en première position dans votre balise