Neoeon - Internet Explorer 8 et CSS

Internet Explorer 8 et CSS

30 VII 2012

Ce n'est un secret pour (presque) personne : IE 8, c'est le Mal. Une nouvelle bizarrerie de ce navigateur m'a obligé à débugguer mon code pour rien. Pourquoi travailler avec IE 8 et pas avec un vrai navigateur, respectueux des standards comme Firefox, me demanderez-vous. Et bien parce que j'y suis obligé ! Je sais, je n'ai pas une vie facile.

Rappel des faits : Après avoir mis en ligne mon application web, quelle ne fut pas ma surprise de voir que sous IE 8, mes directives patiemment codées dans mon fichier CSS étaient (au mieux) à moitié prises en compte ou (au pire) pas prises en compte du tout !

En cherchant un peu dans le "Firebug du pauvre" de IE 8 (Outils > Outils de développement), j'ai remarqué l'option "Mode navigateur" qui propose 3 choix :

Affichage de compatibilité Internet Explorer 8
Internet Explorer 8
Internet Explorer 7

J'ai développé mon application avec l'option "Affichage de compatibilité Internet Explorer 8", sans vraiment y faire attention, mes tests fonctionnant très bien en local.

Pour pallier le problème de rendu en ligne, il faut ajouter cette balise meta dans la balise <head> de votre page html :

<meta http-equiv='X-UA-Compatible' content='IE=8' >

Et tout rentre dans l'ordre. Quand je dis que j'ai pas une vie facile...

Bulle Commentaire Manumanu, le Mercredi 11 Mars 2015

Old as web, mais en réalité il vaut mieux éviter l'utilisation de cette balise — pour plusieurs petites raisons, mais principalement parce qu'elle n'est pas standardisée. Il s'agit d'un palliatif pour les intranets et applications métiers développées du temps d'IE6 et qui constituait la principale difficulté de Microsoft pour les évolutions de son navigateur — c'est toujours le cas d'ailleurs. En fait, les versions d'IE antérieures à 11 déclenchent un mode de rétrocompatibilité (et de sécurité) lorsqu'utilisé en local.

Il vaut mieux passer par un .htaccess (ou des paramètres apache de façon générale) :

<FilesMatch ".(htm|html|php)$">
<IfModule mod_headers.c>
Header set X-UA-Compatible "IE=Edge,chrome=1"
</IfModule>
</FilesMatch>

Voilà voilà !

Bulle Commentaire Pascal, le Dimanche 15 Mars 2015

Merci pour cet éclaircissement. Je ne connaissais pas l'astuce du htaccess, mais l'appli étant justement une appli métier pour un intranet et vu que ça fonctionne très bien comme ça, je n'ai pas cherché à approfondir ce "problème" dont je n'avais d'ailleurs jamais entendu parler avant d'y être confronté.

De plus, n'ayant pas les accès admin sur le serveur de production, autant dire que les paramètres apache, c'est mort. Paramètres apache dont la configuration est plutôt "exotique". C'est à se demander si c'est bien un informaticien qui s'en occupe... Mais c'est un autre problème ;-)

Ajouter un commentaire