: css

Donner une petite hauteur à un bloc sur IE6-

En réalisant certains design, on peut avoir recours à un bloc vide, de faible hauteur, sans autre contenu qu'une image de fond.

Comme exemple, prenons un block de 1px de haut sur 300 de large, avec une couleur de fond rouge.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Bloc de faible hauteur</title>
<style type="text/css">
div {
        height:3px;
        width:300px;
        background:red;
}
</style>
</head>

<body>
        <div></div>
</body>
</html>

La problématique

En visualisant le résultat sur les différents navigateurs, on constate que notre bloc est bien plus haut qu'il ne le devrait sur IE6. En faisant varier la taille du texte, on constate que sa hauteur se modifie. ce dernier est donc directement tributaire de la taille du texte. IE6 semble attribuer par défaut à un bloc une hauteur minimum de la taille d'un line-height.

Les solutions

Une des premières hypothèse est de jouer avec le font size et/ou le line-height afin de réduire cette hauteur, vu que cela semble être la cause du dysfonctionnement d'IE6.

En jouant sur le font-size

Le line-height dépendant directement du font-size, réduire celui-ci à sa simple expression pourrait convenir. On peut ainsi attribuer un font-size de 0 à notre élément:

div {
        height:3px;
        width:300px;
        background:red;
        font-size:0;
}

En visualisant le résultat sur IE6, on obtient bien, cette fois-ci le résultat souhaité. Pour bien s'assurer que la hauteur est bien respectée et que l'espacement disparu n'a pas été reporté au-dessous, à l'extérieur de l'élément, on peut dédoubler celui-ci:

<body>
        <div></div>
        <div></div>
</body>

Le résultat semble parfait. Problème résolu? malheureusement, pas tout à fait... Fixons à présent la hauteur de notre élément à 1px:

div {
        height:1px;
        width:300px;
        background:red;
        font-size:0;
}

Et là, désastre, on s'aperçoit que IE refuse d'attribuer au bloc une hauteur inférieure à 2px :-( On peut essayer de rajouter un &nbsp; à l'intérieur de notre élément afin qu'il ne soit pas vide mais la manoeuvre n'influence pas le résultat, ni même de changer le font-size de 0 par 1px.

Il va faloir donc creuser d'autres solutions pour une hauteur de 1px.

En jouant sur le line-height

Le line-height, contrairement au font-size, ne peut pas recevoir de hauteur nulle. Nous allons donc lui attribuer une hauteur de 1px:

div {
        height:1px;
        width:300px;
        background:red;
        line-height:1px;
}

L'ajout du line-height semble n'avoir aucune influence sur le résultat. cependant en ajoutant un &nbsp; comme contenu de l'élément div:

<body>
        <div></div>
        <div></div>
</body>

on arrive au même résultat que ci-dessus, soit une hauteur minimum de 2px :-(

font-size et line-height

En désespoir de cause on peut essayer de cumuler le font-size de 0 avec le code ci-dessus:

div {
        height:1px;
        width:300px;
        background:red;
        line-height:1px;
        font-size:0;
}

Et là, miracle, on obtient bien le résultat escompté... Mais si l'on retire le &nbsp; tout s'écroule :(

Il est des mystères qu'il ne vaut mieux pas chercher à comprendre.

La solution trouvée est malheureusement lourde à mettre en oeuvre (font-size + line-height + &nbsp;). Pour obtenir cette solution, on est parti de l'idée de corriger la cause du bug de IE. On peut en imaginer une autre approche, en cherchant, cette fois-ci, à masquer le bug.

"Cacher ce bug que je ne saurait voir" overflow:hidden;

On sait que IE6 à la fâcheuse habitude d'interprèter le height un peu comme un min-height. Un peu car celui-ci respecte quand même, dans certains cas, la hauteur attribuée. C'est le cas lorsqu'une valeur autre que visible est attribuée à la propriété overflow. Pour cacher le dépassement d'IE on va donc utiliser la valeur hidden:

div {
        height:1px;
        width:300px;
        background:red;
        overflow:hidden;
}

Ce qui permet d'obtenir facilement le résultat escompté, et sans la présence du &nbsp;

Editer