FAQ CSSConsultez toutes les FAQ

Nombre d'auteurs : 17, nombre de questions : 59, dernière mise à jour : 30 mars 2017 

 
OuvrirSommaireTechniquesBugs des navigateursInternet Explorer

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
Sous Internet Explorer 7
  • 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

Créé le 18 septembre 2009  par Macmillenium

Pour le faire, on utilisera le code suivant :

CSS nécessaire
Sélectionnez

.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 :

 
Sélectionnez

<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.

Mis à jour le 8 octobre 2012  par Iubito, Bisûnûrs

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.

Code HTML
Sélectionnez

<ul>
  <li>1er élément</li>
  <li>2ème élément</li>
  <li>3ème élément</li>
</ul>
Code CSS
Sélectionnez

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.

Créé le 29 février 2008  par Bisûnûrs

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:

1ère solution
Sélectionnez

/* 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 */
}
2ème solution
Sélectionnez

/* 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 */
}
Mis à jour le 8 octobre 2012  par trotters213

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:

 
Sélectionnez

<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:

 
Sélectionnez

<div style="height:1px;overflow:hidden"></div>
Créé le 29 février 2008  par Bisûnûrs, Candygirl
Ce bug d'IE6 apparaît sous différentes configurations :
  • 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).

Mis à jour le 8 octobre 2012  par Candygirl, Bisûnûrs

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 :

commentaires conditionnels dans le HEAD
Sélectionnez

<!--[if lte IE 6]>
<style type="text/css" media="screen">
.img-png { 
  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='chemin_image');
}
}
</style>
Les problèmes du filter AlphaImageLoader :
  • 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.
commentaires conditionnels dans le HEAD
Sélectionnez

<!--[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

Il existe d'autres packages JavaScript qui corrigent également les problèmes des PNG transparents :

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

Mis à jour le 8 octobre 2012  par Macmillenium

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 :

 
Sélectionnez

#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

 
Sélectionnez

#mon-element {
  background: url("chemin-de-mon-image.gif") no-repeat right top;
}
Mis à jour le 8 octobre 2012  par Macmillenium
  

Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright © 2004 Developpez.com Developpez LLC. Tous droits réservés Developpez LLC. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents et images sans l'autorisation expresse de Developpez LLC. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.