Déboguer CSS
Déboguer la page pour Internet Explorer

La page qui nous sert d'exemple a été trouvée sur un forum, l'auteur voulait trouver pourquoi l'image était minuscule avec Internet Explorer sur certaines pages.

Elle utilise un HTML valide ainsi que du CSS valide ce qui va nous permettre de déboguer.

Elle a été réduite à sa plus simple expression et elle et se présente sous deux formes :

Aucun problème avec Firefox, nous pouvons passer à Internet Explorer.

Les copies d'écran ci-dessous donnent un aperçu des différences entre les navigateurs.

Effectuer les corrections pour Internet Explorer

Le prologue xml

On pourrait modifier CSS, mais ici c'est l'interprétation qui est en cause : Firefox est en mode "Standards Compliance Mode" alors qu'Internet Explorer est en "Quirks Mode".

En effet, pour Internet Explorer 6, le DOCTYPE doit être la première ligne !

On ôte donc <?xml version="1.0" encoding="iso-8859-1"?> de l'HTML et le problème est réglé.

Affichage final avec IE 6 :

affichage final

Ce bug a été partiellement corrigé pour IE 7. Comme Opera ou Safari n'affichent pas la page correctement, un autre codage pour cette page est à prévoir si on veut un affichage compatible avec la plupart des navigateurs.