Quand le metatag de compatibilité Internet Explorer ne fonctionne pas

Avec ses dernières versions (9, puis 10), Internet Explorer est en train de redevenir un navigateur décent. Toutefois, il arrive que des bidouilles faites sur des sites anciens le rendent incompatible avec les versions les plus récentes. Comme il serait compliqué de refondre le design de ces vieux sites, Microsoft a ouvert aux intégrateurs la possibilité de forcer le moteur de rendu de leurs versions les plus récentes d’IE en une version plus ancienne. C’est toutefois une astuce à n’utiliser qu’avec d’anciens sites, en aucun cas il ne faut l’utiliser sur un design récent.

Cette balise meta se présente sous la forme suivante :

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

La page d'accueil cassée du site
La page d’accueil cassée du site

Il m’est récemment arrivé d’avoir des remontées utilisateur : le site, qui jusqu’à présent se comportait de manière normale (Les versions plus récentes d’IE émulaient la version 7, pour laquelle le site avait été optimisé), a soudain eu de nombreux bugs : certains éléments étaient décalés, alors que nous n’avions rien changé à ce tag ni aux CSS. Notez sur l’image l’encart vertical de pub recouvrant une partie du menu, ainsi que, à droite de la barre d’adresse, l’cône brisée indiquant une page brisée).

Le dernier développement à être livré avait été la création d’un tag d’url canonique, et c’est effectivement ce dernier développement qui était la cause du souci. En effet, selon la documentation de Microsoft :

L’en-tête X-UA-compatible n’est pas sensible à la casse. Cependant, il doit s’afficher dans l’en-tête de la page Web (la section HEAD ) avant tous les autres éléments, sauf l’élément TITLE et les autres éléments META.


Il ne faut donc avoir que des éléments title ou meta avant ce même meta. Mon link rel=« canonical » était situé avant, ce que j’ai immédiatement modifié, corrigeant le problème. Mes tests ont quand même montré qu’il est possible de conserver un base href avant ce meta, cela n’affecte en rien le comportement d’Internet Explorer.

Laissez votre commentaire