Le but de cette page est de déterminer le comportement des navigateurs lorsqu'une image est intégrée dans un lien (élément img enfant d'un élémnet a), en particulier en ce qui concerne le soulignement de l'image.
On notera que l'image utilisée dans ces tests est translucide (opacité de 60%).
Rendu des navigateurs par défaut
Image dans un lien, sans texte
Le code HTML utilisé est le suivant :
<a href="#"><img alt="Image de test" src="https://fvsch.com/articles/soulignement-image/test.png" /></a>Test:
Résultats:
- Internet Explorer 5-7: image entourée d'une bordure moyenne, image non soulignée.
- Firefox 2-3: image entourée d'une bordure moyenne, image non soulignée.
- Safari 3b: image sans bordure, image non soulignée.
- Opera 9: image sans bordure, image non soulignée.
Image dans un lien, avec texte
Le code HTML utilisé est le suivant :
<a href="#"> <img alt="Image de test" src="https://fvsch.com/articles/soulignement-image/test.png" /> et texte d'accompagnement</a>Test:
Résultats:
- Internet Explorer 5-7: image entourée d'une bordure moyenne, image non soulignée, texte souligné.
- Firefox 2-3: image entourée d'une bordure moyenne, image et texte soulignés.
- Safari 3b: image sans bordure, image et texte soulignés.
- Opera 9: image sans bordure, image non soulignée, texte souligné.
Rendu des navigateurs avec quelques aménagements CSS
Image et texte dans un lien, avec border:none; sur l'image
Le code HTML utilisé est le suivant :
<a href="#"> <img alt="Image de test" src="https://fvsch.com/articles/soulignement-image/test.png"
style="border:none;" /> et texte d'accompagnement</a>Test:
Résultats:
- Internet Explorer 5-7 + Opera 9: image non soulignée, texte souligné.
- Firefox 2-3 + Safari 3b: image et texte soulignés.
Avec border:none; text-decoration:none; sur l'image
Le code HTML utilisé est le suivant :
<a href="#"> <img alt="Image de test" src="https://fvsch.com/articles/soulignement-image/test.png"
style="border:none; text-decoration:none;" /> et texte d'accompagnement</a>Test:
Résultats:
- Internet Explorer 5-7 + Opera 9: image non soulignée, texte souligné.
- Firefox 2-3 + Safari 3b: image et texte soulignés.
En conclusion, aucun changement, comme on pouvait s'y attendre…
Avec border:none; vertical-align:middle; sur l'image
Le code HTML utilisé est le suivant :
<a href="#"> <img alt="Image de test" src="https://fvsch.com/articles/soulignement-image/test.png"
style="border:none; vertical-align:middle;" /> et texte d'accompagnement</a>Test:
Résultats:
- Internet Explorer 5-7 + Opera 9: image non soulignée, texte souligné.
- Firefox 2-3 + Safari 3b: image et texte soulignés.
On remarquera que dans le cas de Firefox 2 et Safari 3b, le soulignement est rectiligne et ne tient pas compte de l'alignement vertical de l'image. Le trait de soulignement est visible par transparence derrière l'image, au second plan (l'image est au premier plan).
En utilisant une image opaque, avec tout alignement vertical qui fait empiéter l'image sur l'espace en dessous de la baseline, on peut masquer le trait de soulignement.
Avec border:none; text-decoration: underline; sur l'image
Le code HTML utilisé est le suivant :
<a href="#"> <img alt="Image de test" src="https://fvsch.com/articles/soulignement-image/test.png"
style="border:none; text-decoration:underline;" /> et texte d'accompagnement</a>Test:
Résultats:
Le text-decoration:underline; n'a aucun impact (tous navigateurs confondus).
De même, ce test avec un text-decoration:none; sur l'image ne donne aucun résultat (pas d'impact sur le rendu des navigateurs).
Conclusions provisoires
Au vu de ces tests, il semble impossible d'obtenir chacun des deux résultats suivants:
- texte et images des liens soulignés dans tous les navigateurs;
- texte des liens soulignés et images non soulignées.
Le seul rendu cohérent d'un navigateur à l'autre que l'on puisse apparemment obtenir est donc le suivant: texte et images des liens non soulignés (via un text-decoration:none; sur les liens).