: css

le calcul des % sur IE

En travaillant sur un site fluide, avec des largeurs en %, le résultat obtenu peut rapidement devenir une vraie prise de tête sur IE. En effet, ce dernier effectue toujours un arrondi mathématique, sans chercher à respecter le 100%.

Exemple

On a côtes à côtes, en float:left, 2 éléments d'une largeur de 50%. Si le parent à un width effectif de 500px, chacun des éléments aura 250px de largeur et ils seront donc bien positionnés côte à côte. Par contre, si le parent à une largeur de 499px, chaque élément aura une largeur de 249.5px, arrondi tous les deux à 250px par IE, ce qui nous donnerait une largeur totale de 500px. IE n'a donc pas la place de les mettre côtes à côtes dans un conteneur de 499px et le deuxième élément vient alors se positionner en-dessous. Plutôt ennuyeux...

les remédiations

Pour le 50/50

Le cas du 50/50 est assez facilement maitrisable puisqu'on aura toujours au pire 1px de trop (lorsque le parent à un width impaire). Pour l'éviter, il suffit de ne jamais arriver à un .5 ce qui est possible en attribuant à l'une des colonnes un width de 49.99% au lieu de 50%. On attribuera cette correction uniquement pour IE (opera 9 ne semble pas prendre en compte les décimales des %), par le biais des commentaires conditionnels, par exemple:

<!--[if IE]>

<style type="text/css">
#droite {
        width:49.99%;
}
</style>
<![endif]-->
Editer