HasLayout et bugs de rendu dans Internet Explorer 6-7

Le HasLayout, dont vous avez sans doute entendu parler au détour d'un tutoriel ou sur un forum, est une spécificité du navigateur Internet Explorer pour Windows, qui affecte les versions 5 à 7 incluses.

Il s'agit d'un mécanisme interne du moteur de rendu d'Internet Explorer. Le HasLayout intervient dans le positionnement des éléments et plus généralement dans le calcul de l'affichage des pages web. Bref, c'est une question de cuisine interne. Pourquoi s'en occuper, s'il s'agit de cuisine interne ? Eh bien parce que cette cuisine-là n'est pas invisible, et que ses conséquences se font sentir dans nos pages web. En effet, ce mécanisme est lié à de nombreux bugs de rendu d'Internet Explorer.

Concrètement, qu'est-ce-que c'est?

Les explications détaillées sur le HasLayout peuvent être trouvées dans l'article On Having Layout. On pourra aussi lire dans la documentation Microsoft: "HasLayout" Overview.

On retiendra surtout que, pour Internet Explorer, tout élément d'une page HTML peut avoir deux états: soit il a le layout, soit il ne l'a pas. Et suivant le cas, l'élément en question ne réagira pas de la même manière. Dans certains contextes, un élément ne s'affichera correctement que s'il a le layout. Dans d'autres, il faudra éviter qu'il l'ait sous peine de voir se déclencher un bug de rendu!

Mais qui a le layout? Par défaut, la grande majorité des éléments HTML n'ont pas le layout. Un élément obtient le layout lorsque l'on lui affecte certaines propriétés CSS. Les plus courantes sont les propriétés CSS width (avec toute valeur autre que auto) et height (avec toute valeur autre que auto). Pour une liste exhaustive, consultez les liens donnés précédemment.

Un exemple de différence de rendu lié au layout

Par défaut, les éléments flottants «dépassent» de leurs blocs parents. Prenons le code suivant:

<p style="border: solid 2px red;">
  Ce paragraphe n'a pas le "layout". Le flottant dépasse (comportement normal).
  <span style="float: left; height: 100px; background: blue;">Un élément flottant</span>
</p>

Nous ajoutons une propriété width avec la valeur 100% au paragraphe qui contient le flottant:

<p style="width: 100%; border: solid 2px red;">
  Ce paragraphe a le "layout". Le flottant est englobé (comportement non standard).
  <span style="float: left; height: 100px; background: blue;">Un élément flottant</span>
</p>

On pourrait multiplier les exemples.

Exploiter le hasLayout pour résoudre un problème de rendu

Comme évoqué précédemment, deux cas de figure co-existent:

• Le HasLayout crée ou déclenche un problème de rendu, qui affecte soit l'élément qui a le layout, soit les enfants de cet élément. Pour corriger le bug de rendu, on pourra supprimer les propriétés qui confèrent le layout à cet élément.
• À l'inverse, on pourra utiliser le layout volontairement pour corriger un bug de rendu, ou pour obtenir un comportement précis de la part d'un élément.

Conférer le layout à un élément

On pourra utiliser les méthodes suivantes pour attribuer le layout à un élément:

1. Appliquer un zoom:1 à l'élément de type bloc qui doit avoir le layout (note: la propriété CSS non standard zoom est apparue dans Internet Explorer 5.5).

2. Si le correctif doit prendre en compte Internet Explorer 5.01, on pourra utiliser une propriété de dimension avec toute autre valeur que auto. Par exemple, un width: 100% ou un height: 1%.

   (Note: en mode Standard, le height: 1% sera ignoré tant que l'élément parent n'aura pas lui-même une hauteur déterminée, par exemple une hauteur en pixels.)

Enfin, on utilisera de préférence un commentaire conditionnel pour n'appliquer ces propriétés qu'à Internet Explorer. Surtout que certains de ces correctifs à base de HasLayout ne visent que les versions 5 et 6 d'Internet Explorer (de nombreux bugs étant corrigés dans la version 7, et ne demandant donc plus de correctif).

Débuguer un problème de hasLayout ou autre comportement aberrant

En débuguant vos pages pour IE 7 et surtout pour IE 6, vous observerez de nombreux comportements étranges voir aberrants (enfin, nombreux pour un site important ou un design complexe). Les plus caractéristiques sont des disparitions d'éléments, certains décalages inexpliqués (mais pas tous), ou des problèmes de «dessin» (où Internet Explorer n'arrive pas à bien dessiner tout l'élément, par exemple une partie des bordures et de la couleur de fond est invisible ou «mangée»).

Face à de tels problèmes, voici la marche à suivre:

1. Identifier quels éléments posent problème.
2. Vérifier lesquels de ces éléments ont le layout.
3. Si certains ont le layout, vérifier s'il est possible de l'enlever (en commentant les propriétés fautives ou en les remplaçant par autre chose d'à peu près équivalent), et voir ce que cela donne.
4. Tenter de conférer le layout à l'élément qui pose problème s'il ne l'a pas déjà.
5. Tenter de conférer le layout à l'élément parent de celui qui pose problème, si ce parent n'a pas déjà le layout.

Les résultats de cette méthode ne sont pas garantis, mais ils sont plutôt bons en général.

Disparition du hasLayout

Le mécanisme du hasLayout n'est plus utilisé dans Internet Explorer 8, et personne ne s'en plaindra. Le moteur de rendu d'Internet Explorer 8 a été largement refondu, et devrait présenter beaucoup moins de comportements aberrants que celui du grand frère IE 7 (qui malgré les corrections de bugs conserve des comportements non-standard assez problématiques). Nous pourrons bientôt dire avec émotion: R.I.P. hasLayout.