Espacements verticaux entre li sous IE

Vous avez sans doute déjà passé un certain temps à essayer d’enlever un horrible espace blanc entre les éléments d’une liste sous Internet Explorer. Encore un bug du célèbre navigateur assez dérangeant. Afin de remédier à cela, il existe plusieurs solutions plus ou moins efficaces et ou fastidieuses à mettre en place.

Le problème provient de l’indentation du code qui est mal interprété par IE. Une solution simple (mais vraiment fastidieuse) consiste à enlever l’ensemble de ces indentations. Une jolie liste bien indentée comme cela :

<ul>
<li>Element 1</li>
<li>Element 2</li>
<li>Element 3</li>
</ul>

deviendrait au final :

<ul><li>Element 1</li><li>Element 2</li><li>Element 3</li></ul>

C’est assez imbuvable vous en conviendrez. On peut aussi commenter entre chaque élément, mais cela n’améliore pas forcément la lisibilité non plus :

<ul><!--
--><li>Element 1</li><!--
--><li>Element 2</li><!--
--><li>Element 3</li><!--
--></ul>

Il existe une solution purement CSS, plus propre. Il s’agit de floater les éléments de la liste (il faudra bien entendu s’assurer que les

ul{
width:200px;
overflow:hidden;
}

li{
width:100%;
float:left;
}

Aucun commentaire