HasLayout est un concept propriétaire à Microsoft qui est apparu dans la version 5.5 d'Internet Explorer.

Qu'est ce que c'est ?
Le moteur de rendu des versions 5.5, 6 et 7 d'Internet Explorer intègre une propriété appelée HasLayout, sa valeur est true si l'élément a le Layout.

Quel sont les éléments qui ont le Layout par défaut ?
TABE, TD, BODY, IMG, HR, INPUT, SELECT, TEXTAREA, BUTTON, IFRAME, EMBED, OBJECT, APPLET et MARQUEE
Les autres éléments n'ont pas le Layout.

Comment faire pour donner le Layout ?
Certaines propriétés permettent de donner le Layout à un élément :

• position: absolute
• float: left ou right
• display: inline-block
• zoom: de préférence 1
• width: sauf la valeur initiale auto
• height: sauf la valeur initiale auto

• max-width et min-width
• min-height et max-height
• overflow: sauf la valeur initiale auto
• overflow-x: sauf la valeur initiale auto
• overflow-y: sauf la valeur initiale auto

En savoir plus sur le concept de HasLayout

Pour le faire, on utilisera le code suivant :

.fixe { 
  /* un bloc fixe situé en haut qui fait toute la largeur */ 
  position : fixed; 
  top: 0px; 
  left: 0px; 
  right: 0px; 
  width: 100%; 
  /* et le patch pour IE */ 
  position : expression("absolute"); 
  width : expression("100%"); 
  top : expression(document.body.scrollTop + this.offsetHeight - this.offsetHeight); 
  left : expression("0px"); 
}

En mode standard (avec un doctype valide), il faut remplacer document.body par document.documentElement.

Exemple d'appel du CSS dans la page (X)HTML :

<div class="fixe">Bloc fixe !</div>

Note : Ce code fonctionne aussi très bien avec Opera/Mozilla avec la propriété position : fixed, mis au début.

Sous Internet explorer 6 (et inférieur), les marges horizontales sont doublées sur le premier élément d'une série de flottants. Pour corriger ce comportement, il suffit d'appliquer sur le premier élément de la série de flottants la règle CSS display: inline; .

Il n'est pas génant de définir cette propriété pour toute la série d'éléments flottants.

<ul>
  <li>1er élément</li>
  <li>2ème élément</li>
  <li>3ème élément</li>
</ul>

li {
  float: left;
  display: inline;
  margin-left: 50px;
  width: 100px;
  backround-color: #FAA;
}

Conformément aux standards, les navigateurs respectueux ignoreront la règle display: inline;. Ainsi, votre page aura l'aspect attendu sur les navigateurs les plus courants.

Internet Explorer 6 n'implémente pas la propriété CSS min-height. En revanche, son implémentation de la propriété CSS height correspond au comportement normal du min-height.

Il convient donc d'utiliser height pour Internet Explorer, mais de le masquer aux autres navigateurs.

Il y a plusieurs solutions:

/* Tous les navigateurs voient cette règle */
.monElement {
  min-height: 600px; /* IE ne comprend pas */
}
 
/* seul internet explorer voit cette règle */
* html .monElement {
  height: 600px; /* Pour les autres navigateurs, le sélecteur * html
                    ne sélectionne rien car html doit être l'élément de plus
                    haut niveau */
}

/* Tous les navigateurs voient cette règle */
.monElement {
  height: 600px; /* tous les navigateurs comprennent */
}
 
/* IE n'appliquent pas ces règles car il n'implémente pas
le sélecteur > */
html>body .monElement {
  height: auto; /* on écrase la valeur de height précedemment définie */
  min-height: 600px; /* on définit min-height pour les navigateurs autre que IE */
}

Ce problème survient quand vous avez spécifié une hauteur inférieure au line-height calculé du div. En effet, IE6 alloue automatiquement l'espace nécessaire à un texte éventuel.

Vu que le line-height est calculé à partir du font-size, on peut attribuer un font-size de 0 pour le div en question:

<div style="height:10px;font-size:0"></div>

Malgré un font-size de 0 il est impossible d'obtenir une hauteur de 1px sur IE6, ce que permet de faire la propriété overflow:

<div style="height:1px;overflow:hidden"></div>

• une imbrication de flottants avec le float intérieur qui arrive à moins de 3px de la largeur du contenant ;
• la présence de plusieurs commentaires dans le html en relation avec des float ;
• la présence d'un élément en display:none en relation avec les float ;
• la présence de champs de formulaires cachés ( <input type="hidden" ... /> ) toujours en relation avec les float.

Le texte répété semble d'autant plus long que le nombre d'éléments non affichés est grand (les commentaires, les éléments en display: none et les champs cachés).

Les images PNG 24 et 32 bits sont dotées d'une couche Alpha que IE6 ne gère pas, les zones transparentes sont alors affichées en gris.

On peut corriger ce problème en utilisant le filter AlphaImageLoader de Microsoft.
Il est préférable d'éviter les Hack CSS et d'utiliser les commentaires conditionnels pour attribuer le filter :

<!--[if lte IE 6]>
<style type="text/css" media="screen">
.img-png { 
  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='chemin_image');
}
}
</style>

• Ne fonctionne pas si l'élément n'est pas doté de Layout ;
• Impossible de sélectionner le texte situé à l'intérieur de l'élément ;
• Les liens et les champs deviennent incliquable.

<!--[if lte IE 6]>
<style type="text/css" media="screen">
.img-png { 
  background:none; /* Si un autre background est attribué */
  zoom:1; /* Si l'élément n'a pas le Layout */
  position:relative; /* pour rendre les liens et les champs cliquable */
  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='chemin_image');
}
}
</style>

Malheureusement, les propriétés background-repeat et background-position ne fonctionnent pas avec le filter AlphaImageLoader

• http://homepage.ntlworld.com/bobosola/
• http://www.twinhelix.com/css/iepngfix/
• http://labs.unitinteractive.com/unitpngfix.php
• http://www.dillerdesign.com/experiment/DD_belatedPNG/

La librairie DD_belatedPNG corrige tous les problèmes du filter AlphaImageLoader (notamment background-repeat et background-position).

Sous Internet Explorer 7 et inférieures, l'arrière-plan d'un champ texte défile avec son contenu si celui-ci est plus long.

Pour corriger ce problème, il suffit d'attribuer la propriété background-position avec les valeurs right et top :

#mon-element {
  background-image: url("chemin-de-mon-image.gif");
  background-repeat: no-repeat;
  background-position: right top;
}

Ou utiliser la propriété raccourcie background

#mon-element {
  background: url("chemin-de-mon-image.gif") no-repeat right top;
}