Voilà la page de test (réduite au minimum), et voilà ce que j'obtiens :
- Avec Internet Explorer 6 et 7
- Avec Firefox, Opera et Chrome
Comme les trois "non-IE" s'accordent sur le résultat, je suppose que c'est Internet Explorer qui se plante, et pourtant son rendu me semble plus logique. Le code est globalement très simple et ressemble à ça :
<div class="outer">
<span class="inner" style="float: left;">
<a href="#">Voici mon lien</a>
</span>
</div>
Je ne comprends pas ce qui explique tout cet espace laissé entre le haut de la balise <a> et le haut du <span> qui l'entoure (l'espace rouge au-dessus de "Voici mon lien" dans la deuxième capture), alors que je n'en ai jamais spécifié. C'est pour ça que le rendu d'Internet Explorer, qui ne laisse aucune place entre le <a> et le <span>, me semble bien plus normal.
En utilisant Firebug ou l'outil d'inspection intégré à Webkit, on se rend compte que la balise <a> fait 12 pixels de haut, alors que le <span> en fait 20. Qu'est-ce qui explique cette différence ?
P.S : Si je supprime le <span> (quitte à déplacer le style float: left dans le <a>, ça ne change rien) alors tout redevient normal : plus d'espace "fantôme" ni d'élément démesuré.
P.P.S : Le gag, c'est qu'Internet Explorer réagit comme ça uniquement si je colle le <span> et le <a> sur la même ligne. J'ai triché dans le [pre] ci-dessus en les mettant sur 3 lignes, alors que tout est collé dans le vrai code source de la page. Ça non plus, je n'arrive pas à comprendre en quoi ça joue ^^
