Nombres impairs et pourcentages en CSS

Prenez le code HTML suivant :

<ul id="maliste">
  <li>Élément I</li>
  <li>Élément II</li>
<ul>

Ainsi que le code CSS :

ul#maliste {
  width: 100%;
  overflow: hidden;
}

ul#maliste li {
  width: 50%;
  float: left;
}

Cela fonctionne dans tous les navigateurs. Le résultat est nos deux éléments LI un à côté de l’autre.

Vous remarquerez que la largeur de l’élément UL est égal à 100% ce qui signifie qu’il prend la pleine largeur de son parent. Si son parent a une largeur de 600 pixels, la liste aura une largeur de 600 pixels. Chaque item de la liste aura une largeur de 300 pixels. Ils seront donc côte-à-côte, comme nous le voulons.

Cependant, admettons que la largeur du parent de la liste est un nombre impair de pixels, par exemple, 601 pixels. La liste sera donc large de 601 pixels. Chaque item de la liste sera égal à la moitié de 601 pixels.

Mais comment est calculée cette valeur? Hé bien il semblerait que chaque navigateur a sa propre méthode d’ajuster les largeurs.

Mise à jour : J’ai préparé un petit fichier JPEG qui illustre le comportement des navigateurs :

• Firefox semble ajuster la largeur d’un des items pour que tout l’espace soit pris. Cela veut donc dire que les items ne sont plus de la même largeur.
• Internet Explorer (6 et 7) arrondi les largeurs des items à la hausse. Cela veut donc dire que la somme de la largeur respective des items est supérieure à 100%. Cela veut aussi dire que les items ne sont plus côte-à-côte.
• Safari (et Opera) arrondissent les largeurs des items à la baisse. Cela empêche le deuxième item de tomber sous le premier, mais cela veut aussi dire que les deux items sont de largeur différentes et qu’ils ne remplissent pas l’espace à 100%.

Je ne sais pas si ce problème avait été exposé auparavant, mais en tout cas, c’est bon à savoir!