Emuler la propriété ‘min-height’ sous IE

La propriété ‘min_height’ de CSS permet de spécifier à un conteneur, une hauteur minimale. IE, ne reconnaissant pas cette propriété, résoud le problème en adaptant automatiquement la hauteur de l’élément en fonction de son contenu ce qui, bien évidement, pause un problème sous les autres navigateurs.

La solution la plus simple pour contourner ce problème est de surclasser l’élément concerné en utilisant un balisage que ne reconnait pas IE. Je m’explique :

Imaginons que nous avons un conteneur (de classe ‘monDIV’) dont la taille minimale voulue est de 250 pixels. Sous IE, la CSS ressemblerait à ça :

div.monDiv{height:130px;}

Sous les autres navigateurs, nous aurions la CSS suivante :

div.monDiv{min-height:130px;}

La fusion des deux CSS donnera la suivante :

div.monDiv{height:130px;}
html>body div.monDiv{height:auto;min-height:130px;}

Ainsi, IE ne reconnaissant pas le balisage html>body, la classe ne sera pas interpretée. En revanche, sous les autres navigateurs, la deuxième ligne viendra surclasser la première.

Voilà, vous savez dorénavant utiliser les hauteurs minimales de manière cross-browser