Impact du code HTML sur le rendu final d'une page Web Un cas-limite : espaces excédentaires entre des items de liste avec Internet Explorer 6

Un bug dans Internet Explorer 6

Laurent Denis décrit le cas de la prise en compte des espaces non significatifs dans les listes dont les items sont dotés de layout :

"Une liste non ordonnée contenant des éléments span (ou tout autre élément de type en ligne tels que des liens) en display:block ne s'affiche pas normalement sous IE Windows qui ne fusionne pas les espaces non significatifs dans le balisage."

Un bug qui se manifeste par des items de liste

Il s'agit d'un bug très particulier d'Internet Explorer 6, mais que l'on rencontre tôt ou tard, et qui se manifeste par des items de liste (souvent ceux d'un menu de navigation vertical) qui s'écartent très fortement en hauteur, de façon inexpliquée.

Des espaces non significatifs deviennent des lignes vides entre les items de liste

Le bug fait que les espaces normalement non significatifs (retours à la ligne, tabulations, espaces) deviennent des lignes vides entre les items de liste. Ce n'est pas censé arriver, car les éléments li sont des éléments de type bloc !

Sauf erreur de ma part, ce bug ne concerne que la version 6, et peut-être la version 5, mais a été corrigé dans IE7.

Pour contourner ce bug, deux solutions :

 soit on combat "le mal par le mal" en appliquant le layout aux éléments de type en-ligne en display: block qui déclenchent le problème,

 soit on supprime les espaces non significatifs de la liste, c'est-à-dire que l'on met tout le code de la liste sur une seule ligne.