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 signaler un bug lorsqu'on utilise p:first-letter 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 six formes :

•  Page avec l'HTML et CSS corrigés 
•  Page corrigée avec IE 6 et IE 7 RC1 Sélecteur universel ôté
•  Page corrigée avec IE 6 et IE 7 RC1 Remplacement de margin par padding
•  Page corrigée avec IE 6 mais pas avec IE 7 RC1 Suppression de l'espace dans la règle
•  Page corrigée avec IE 6 mais pas avec IE 7 RC1 Suppression d'une règle qui génère le problème
•  Page corrigée avec IE 6 et IE 7 RC1 Utilisation de hasLayout

Avec Internet Explorer, l'utilisation de first-letter est risquée car elle peut occasionner toutes sortes de problèmes d'affichage.

Ici, aucun problème avec Firefox, Konqueror, Safari ou Opera mais ce n'est pas toujours le cas avec first-letter.

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

• Etat initial
• 

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. Dans notre cas, #content p:first-letter va appliquer margin:0; au deuxième paragraphe au lieu des 70px déclarés pour la marge gauche de #content p. Dans le premier paragraphe, les choses sont moins claires.

Supprimer * {margin:0;} va régler le problème pour IE 6 et IE 7 RC1 et nous obliger à définir les marges dans les autres déclarations.

Le remplacement de margin par padding

Remplacer margin par padding va régler le problème pour IE 6 et IE 7 RC1.

La suppression de la règle qui génère le problème

Pour que la règle p:first-letter soit appliquée par IE 6, il faut un espace avant la parenthèse (avec #content p:first-letter { la règle est appliquée , avec #content p:first-letter{ elle est ignorée).

La suppression de l'espace règle le problème avec IE6 mais l'effet recherché pour la première lettre du paragraphe est perdu.

L'autre règle qui génère le problème c'est #content p.problem{} avec n'importe quelle identitée ou classe avant ou après p.

La suppression de cette (re)définition règle le problème avec IE 6 mais pas avec IE 7 RC1.

Utiliser hasLayout

Quand on sélectionne le premier paragraphe avec l'Inspecteur DOM, on voit le cadre bleu en place et on constate l'absence de hasLayout dans la partie Current Style.

On ajoute donc height:1% avec l'Inspecteur DOM, hasLayout apparaît et le premier paragraphe prend sa place.

On ajoute donc height:1% dans la page entre des commentaires conditionnels.

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

Cette méthode règle le problème avec IE 6 et IE 7 RC1.