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 comprendre pourquoi le menu n'apparaissait pas avec Internet Explorer 6.

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 Internet Explorer 7, Firefox ou Opera, nous pouvons passer à Internet Explorer 6.

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

Effectuer les corrections pour Internet Explorer 6

Les lignes manquantes

Quand on sélectionne la première ligne de #menu avec l'Inspecteur DOM, on voit le cadre bleu en place et on constate l'absence de hasLayout dans la partie Current Style.

DOM inspector

On ajoute donc height:1% avec l'Inspecteur DOM, hasLayout apparaît ainsi que la première ligne.

DOM inspector

On en fait autant pour les autres lignes.

DOM inspector

DOM inspector

On ajoute donc height:1%; dans #menu li, de préférence entre des commentaires conditionnels, dans le code source :

<!--[if IE]>
<style type="text/css">
#menu li{height:1%;}
</style>
<![endif]-->

L'espace entre les boutons du menu

L'espace entre les boutons du menu, c'est le whitespace bug.

Plusieurs solutions ici pour les liens, la première c'est d'ajouter #menu a dans notre instruction pour IE, la plus élégante c'est d'ajouter :

#menu a {display: inline-block;}
#menu a {display: block;}

DOM inspector

Même chose pour #menu span.

DOM inspector

Nous avons donc

<!--[if IE]>
<style type="text/css">
#menu li,#menu a,#menu span{height:1%;}
</style>
<![endif]-->

Comme Internet Explorer 7 n'est pas affecté par ces bugs nous pouvons aussi avoir dans notre feuille de style

* html #menu a,* html #menu span,* html #menu li{height:1%;}

Les marges négatives

#menu utilise des marges négatives. En l'absence de position:relative; dans #menu, on obtient ceci :

DOM inspector

Le problème ne se pose pas dans notre cas. Passer la souris au dessus des deux premières lignes donne l'effet escompté.

DOM inspector

Le seul problème restant, c'est que passer la souris au dessus des deux dernières lignes n'a aucun effet (l'effet n'a pas de sens et il faudrait éviter d'avoir des boutons qui ne servent à rien).
Là, pas de solution sinon un fichier htc ou du javascript.

Notre affichage final sera donc sensiblement le même avec les navigateurs récents.

affichage final avec Internet Explorer 6