|
| |
| PRATIQUE CLIENTS WEB |
 |
|
|
| Internet Explorer : connaître hasLayout, source et solution de nombreux bugs CSS |
| |
| Présente depuis IE 5.5, la propriété hasLayout décrit si un élément HTML est stylé ou non, ce qui a des implications profondes dans le traitement du DOM et des CSS. Découvrez ces implications et comment les déjouer.
(10/01/2007) |
  |
 |
Forum |
|
|
Réagissez
dans les forums de JDN Développeurs
|
Internet Explorer, comme de nombreuses autres applications Windows exploitant
du contenu HTML, repose sur un moteur de rendu pour l'affichage des pages et des
feuilles de style, nommé Trident (son équivalent Mac est Tasman).
Introduit avec IE 5.5 en 1997, Trident a évolué au rythme des technologies mais,
comme le montre le paysage des navigateurs Web actuel, jamais assez rapidement
pour correspondre aux besoins des développeurs.
Les avancées
des CSS ont forcé les équipes de développement de Trident à pousser toujours plus
les possibilités de leur moteur, jusqu'à atteindre une limite : reposant
toujours sur d'anciennes conceptions de ce qu'est une page, Trident considère
que tout contenu tient dans une boîte, et n'en sort pas. Ce n'est plus le cas
avec les CSS, où le contenu peut sortir sans problème de sa boîte d'origine. De
ce fait, il devenait nécessaire d'adapter le moteur.
C'est dans IE 5.5, en juillet 2000, qu'est alors introduite la propriété hasLayout.
Utilisée en interne par le moteur Trident - elle n'est accessible normalement
qu'en lecture - elle renvoie pour tout élément un booléen indiquant si celui-ci
a ou non un "layout", à savoir, si un style lui est appliqué. Un élément qui n'a
pas de layout subit l'influence de ses ancêtres qui en ont un - ce qui ne marche
pas toujours dans Trident, pour cause de bugs. Un élément qui présente
un layout, au contraire, est seul responsable de son affichage - et prend le risque
de se voir agrandi au besoin de contenu.
Dans les faits, il peut fréquemment arriver qu'un élément ne soit pas affiché
comme on serait en droit de l'attendre dans IE. Si il s'agit d'un élément bloc,
on pourra alors vérifier, via JavaScript par exemple, si celui-ci a un layout
ou non, et dans ce dernier cas lui en donner un afin de le sortir de l'influence
de ses ancêtres. Mais il faut savoir que mettre un layout peut provoquer d'autres
problèmes encore...
Découvrir si un élément dispose d'un layout revient à tester une propriété avec
JavaScript :
// affiche true si l'élément a un layout.
alert(getElementById('idElement').currentStyle.hasLayout);
Donner un layout à un élément est cependant assez simple, et les premiers contournements
CSS (ou "hacks"), étaient d'ailleurs sans le savoir basés sur cet ajout de layout.
Les propriétés CSS suivantes donnent un layout à tout élément bloc :
position: absolute
float: left ou float: right
display: inline-block
width: tout sauf "auto"
height: tout sauf "auto"
overflow: hidden|scroll|auto (spécifique à IE7)
overflow-x|-y: hidden|scroll|auto (spécifique à IE7)
Les éléments disposant d'un layout par défaut sont, entre autres : html,
body, table, tr, td, th,
iframe, embed, object, applet,
img, hr, input, button, select,
textarea, fieldset, legend, marquee...
Ce ne sont là qu'une partie infime des informations à maîtriser au sujet de hasLayout,
mais les connaître devient indispensable pour prévoir au mieux gérer l'affichage
de ses conceptions CSS sous IE, et résoudre les bugs.
En résumé, un mécanisme en plus à intégrer dans sa lutte contre les bugs d'affichage
d'IE...
Les meilleures astuces CSS sur le JDN :
- Comment
appliquer les CSS d'une page web au contenu d'une iframe ?
- Comment
centrer horizontalement une DIV dans une autre en CSS ?
- Comment
créer un arrière-plan (backgroud) CSS extensible et adaptable ?
- Comment
définir les cellpadding et cellspacing en CSS ?
- Comment
modifier l'image d'un bouton input en CSS ?
- Comment
rendre l'arrière-plan d'un élément semi-transparent en conservant le texte de
cet élément opaque en CSS ?
- Internet
Explorer supporte-t-il l'attribut CSS border-radius
|
|
|
|
