Bug avec l’unité relative em et Internet Explorer 5-7

Màj: 2009

Descriptif du problème

Dans certaines pages utilisant l’unités relative em pour dimensionner le texte, on observe avec Internet Explorer pour Windows un comportement étrange lors du redimensionnement du texte. Si au niveau d'affichage standard tout se passe bien, lorsqu’on redimensionne le texte, on observe une réduction ou un agrandissement exponentiel de la taille du texte, apparemment en fonction de l’imbrication des éléments de contenu.

Pour rappel, Internet Explorer (versions 6 et 7) dispose de 5 niveaux d’agrandissement du texte (plus petit, petit, normal, grand, plus grand).

Exemple type

Voici un exemple plus parlant. Le code XHTML correspondant est de la forme suivante:

<body>
<p>Lorem ipsum...</p>

<div>Première div
<p>Lorem ipsum...</p>
</div>

<div>Première div
<div>Deuxième div
<p>Lorem ipsum...</p>
</div></div>

<div>Première div
<div>Deuxième div
<div>Troisième div
<p>Lorem ipsum...</p>
</div></div></div>

<div>Première div
<div>Deuxième div
<div>Troisième div
<div>Quatrième div
<p>Lorem ipsum…</p>
</div></div></div></div>
</body>

La feuille de style CSS associée est minimale (on pourra le vérifier dans le code source de l’exemple, ou en début de la page d’exemple):

body {font-family: Verdana, sans-serif;}
p {margin-top: 0; color: green;}
div {font-size: 1em;}

Avec cette instruction, à chaque imbrication de div, la taille du texte devrait être multipliée par 1, c'est à dire qu’elle devrait rester constante. Cependant, avec Internet Explorer, la réduction du texte est (exponentiellement?) proportionnelle à l'imbrication des div. Même chose pour l’agrandissement du texte.

Voici la page de l’exemple présentant ce problème. Avec Internet Explorer pour Windows, augmentez ou diminuez la taille du texte avec «CTRL+Molette_souris» ou via «Affichage > Taille du texte». Vous pouvez également tester le comportement des autres navigateurs, pour comparaison.

Solutions?

La raison profonde du problème reste à identifier, ce qui permettrait d’apporter une réponse claire.

Cependant, les combinaisons suivantes permettent d’éviter ce bug:

Utiliser font-size: 100%; plutôt que font-size: 1em;

Avec le même code XHTML, on utilise la feuille de style suivante:

body {font-family: Verdana, sans-serif;}
p {margin-top: 0; color: green;}
div {font-size: 100%;}

Voir l’exemple correspondant. Le problème disparaît.

Appliquer un font-size: 100%; à l’élément body

Feuille de style:

body {font-size: 100%; font-family: Verdana, sans-serif;}
p {margin-top: 0; color: green;}
div {font-size: 1em;}

Voir l’exemple correspondant. Là encore, le problème disparaît.

Note: si l’on avait appliqué une valeur en em à body, on aurait constaté le même problème, mais «amplifié».

Conclusion

Il semblerait qu’appliquer un font-size: N%; à n’importe quel élément de la page supprime le problème pour cet élément mais aussi pour tous ses éléments enfants. En voici un petit exemple, où un font-size: 100%; est appliqué à certains des conteneurs et non plus à l’élément body lui-même.

Les raisons profondes du bug (me) sont inconnues (et je suis preneur pour toute info sur le sujet). Mais ce correctif du «font-size: N%;» est à retenir.

Petit ajout: trouvé une référence en anglais sur ce problème, intitulé le em font-resizing bug ou le extreme font-resizing bug. L'article en question préconise aussi l’application d'un font-size: 100%; à un élément de base. On trouvera dans cet article quelques précisions supplémentaires qui ne figurent pas ici.