Ceci est le premier article d’une longue série. Au fil de mes expériences dans le Web, j’essaierai de vous faire connaître les problèmes que je rencontre au quotidien et les solutions que je trouve pour les régler.
Dans cet article, je vais vous montrer comment simuler le comportement de min-height, une propriété CSS très utile mais très peu jamais utilisée car non comprise par Internet Explorer 6 et inférieurs (au même titre que max-height, max-width et min-width).
Il existe plusieurs solutions pour arriver à nos fins. La première consiste à exploiter la mauvaise interprétation par IE6 des propriétés height et width. En effet, sur IE6, si le contenu d’un bloc dépasse la largeur ou la hauteur définie, le bloc va s’agrandir, ce qui n’est pas le comportement normal (dicté par le W3C). On utilise aussi la non compréhension par IE6 de l’argument CSS !important. Ce dernier permet à l’attribut auquel il est ajouté de prendre le pas sur tous les mêmes autres attributs qui pourraient se trouver à l’intérieur de la même class ou du même id :
selector {
min-height:500px;
height:auto !important;
height:500px;
}
Comment IE6 va l’interpréter ?
Il ne va pas comprendre min-height ni !important (qu’il est bête) mais uniquement height. Comme height se comporte comme min-height devrait se comporter (s’il était compris), on a bien une taille minimum de 500 pixels.
Comment les navigateurs modernes (IE7, Firefox, Opera, etc.) vont l’interpréter ?
Ils vont lire le min-height et les deux height mais prendre en priorité height:auto. Comme auto est la valeur par défaut de height, c’est comme si la propriété n’existait pas. On a bien une taille minimum de 500 pixels.
La deuxième solution consiste à faire appel à un fichier JavaScript qui va tout faire tout seul. Il suffit de l’inclure uniquement dans le cas où le navigateur est IE6 ou inférieur, via un commentaire conditionnel. Cette solution est la moins élégante (quid des gens qui désactivent JavaScript) mais de loin la plus facile à intégrer.
Ajouter ces quelques lignes dans le head de votre fichier (X)HTML :
<!--[if lte IE 6]>
http://minmax.js
<![endif]-->
Le fichier minmax.js est téléchargeable sur cette page. Tous les min-height, max-height, min-width et max-width seront interprétés sur IE6 via ce fichier JavaScript (avec un petit temps de latence).
Les commentaires conditionnels sont des commentaires uniquement interprétés par Internet Explorer. Vous en trouverez une excellente explication chez Laurent Denis. Dans le cas qui nous occupe, le fichier JavaScript ne sera appelé que si le navigateur est inférieur ou égal à IE6.
Si vous avez des problèmes de compatibilité avec vos XHTML et CSS, n’hésitez pas à m’expliquer le problème dans les commentaires. Si je l’ai déjà expérimenté, j’essaierai de vous apporter la (ou les) solutions pour les résoudre.
Sources :
* Le Hack CSS !important
* Min-Height Fast Hack
* Les syntaxes de commentaires conditionnels pour IE Windows
* minmax.js
Le blog de Vincent Battaglia 
