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 savoir pourquoi la barre de défilement n'était pas active 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 Firefox, Internet Explorer 7, Konqueror, Safari 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

Le sélecteur universel

Souvent, afin de se simplifier la tâche ou pour déboguer, on utilise * {margin:0;padding:0;}. Avec IE cela génère parfois des conflits.

L'auteur ici a utilisé le sélecteur universel pour tout positionner en une fois * {position:relative;}.

Malheureusement, position:relative; appliqué à une boîte sans dimension occasionne de nombreux problèmes dont le "Unscrollable Content Bug" si hasLayout n'est pas présent.

Ici, hasLayout est présent dans les conteneurs. Pas moyen donc de corriger le problème.

Comme position:absolute; n'est pas utilisé par un élément, position:relative; n'est pas forcément utile. On supprime donc cette instruction et on voit si cette déclaration est utile pour un autre sélecteur.

Supprimer * {position:relative;} règle le problème avec IE 6.