Pourquoi mon bloc a une hauteur plus grande que prévue sous IE ?

Astuce par Raphael (Eleveur de kiwiz, Strasbourg)
Mis à jour le 02 Février 2009. 4486 lectures.
Tags : css, hauteur, explorer

Internet Explorer (version 7 et inférieures) affecte une hauteur minimale aux éléments de niveaux bloc dotés de certaines propriétés leur conférant le Layout (width: toutes valeurs autre que auto, display:inline-block et la propriété Microsoft zoom)

Cette hauteur est celle de la taille du texte par défaut, la hauteur de ligne "line-height" pour être précis (dont la valeur est de 1em, aux alentours de 13-20px si rien n'est spécifié)

En clair, si la taille de texte par défaut est supérieure à la hauteur d'un bloc, ce bloc sera "forcé" à avoir cette hauteur minimale... même si l'élément ne contient aucun texte !

Les solutions évoquées ci-dessous règlent généralement ce problème :

  • font-size: 1px sur l'élément (la valeur "0" ne fonctionnant pas sur certains navigateurs)
  • line-height: 1px sur l'élément

Ressources