Min-width, max-width, min-height et max-height sur Internet Explorer 6

Internet Explorer 6, contrairement aux versions suivantes, ne reconnait pas les propriétés CSS max-width, max-height, min-width, min-height. Il faut donc avoir recours à des subtilités pour les mettre en oeuvre.

1. Simuler min-height avec la propriété height

Dans Internet Explorer 6, la propriété height est mal interprétée. Elle ne fige pas la hauteur de l'élément, mais fonctionne en partie comme une hauteur minimale: le bloc prend la hauteur donnée, mais peut s'étendre en hauteur si son contenu est plus important.

Dans de nombreux cas de figure, on pourra donc utiliser height à la place de min-height pour IE6 uniquement. Attention à bien adresser cette règle spécifique à Internet Explorer uniquement, par exemple à l'aide d'un commentaire conditionnel.

Attention également à l'utilisation de la propriété overflow. Si le bloc est en overflow:hidden, overflow:auto ou overflow:scroll, le comportement de la propriété height redevient normal dans IE6. Dans ce cas de figure, elle ne peut donc pas être utilisée comme équivalent de min-height.

2. Utilisation de JavaScript

Les dimensions minimales et maximales peuvent être simulées grâce à JavaScript. Il s'agit de tester les dimensions du bloc une fois la page chargée et les principaux styles CSS appliqués, et de corriger les dimensions du bloc si elles sont plus faibles ou plus importantes qu'un certain seuil.

Par exemple, pour émuler une largeur maximale (max-width) de 1100 pixels, il faut:

• récupérer en JavaScript la largeur (en pixels) du bloc;
• vérifier si elle est supérieure à 1100;
• si c'est le cas, appliquer un width:1100px à l'élément.

Il est important de noter que:

• Obtenir la largeur exacte d'un élément ou sa hauteur exacte peut être difficile; l'utilisation de bibliothèques JavaScript peut résoudre le problème en fournissant des outils pour cela, notamment avec jQuery et la méthode .height().
• Le résultat obtenu n'est pas un strict équivalent des propriétés de dimensions minimales et maximales. En cas de redimensionnement de la fenêtre par l'utilisateur, le bloc ne s'adaptera pas de la même manière.

3. Utiliser JavaScript et les expressions CSS

Internet Explorer permet d'utiliser un code JavaScript bref comme valeur d'une propriété CSS, en utilisant expression(). La syntaxe est la suivante:

propriété: expression( code JavaScript );

Notons dès maintenant que l'utilisation des expressions CSS est déconseillée, car elle a un impact sur les performances (temps de calcul avant l'affichage de la page) non négligeable.

Voici à titre informatif un exemple d'utilisation des expressions CSS. Il s'agit ici d'émuler min-width pour le conteneur principal de la page:

<!--[if IE 6]>
<style type="text/css">
#global {
  /* Si la largeur de BODY est supérieure à 1000px,
  la ramener à 1000px. Sinon, la laisser à "auto". */
  width: expression( document.body.clientWidth > 1000? "1000px": "auto" );
}
</style>
<![endif]-->

Voici un deuxième exemple qui tente d'émuler à la fois min-width et max-width:

<!--[if IE 6]>
<style type="text/css">
#global {
	/* Si la largeur de BODY est inférieure à 600px,
	la ramener à 600px. Sinon, tester si la largeur de
	BODY est supérieure à 1000px. Si oui, la ramener à
	1000px. Enfin, si aucune des deux conditions n&#39;est
	remplie, laisser la largeur à "auto". */
	width: 760px;
	width: expression( document.body.clientWidth < 600? "600px" : document.body.clientWidth > 1000? "1000px" : "auto" );
}
</style>
<![endif]-->