Soulignement des images dans un lien

css html outdated

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="test.png" /></a>

Test:

Image de test

Résultats:

Image dans un lien, avec texte

Le code HTML utilisé est le suivant :

<a href="#">&nbsp;<img alt="Image de test" src="test.png" /> et texte d'accompagnement</a>

Test:

 Image de test et texte d'accompagnement

Résultats:

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="#">&nbsp;<img alt="Image de test" src="test.png"
	style="border:none;" /> et texte d'accompagnement</a>

Test:

 Image de test et texte d'accompagnement

Résultats:

Avec border:none; text-decoration:none; sur l'image

Le code HTML utilisé est le suivant :

<a href="#">&nbsp;<img alt="Image de test" src="test.png"
	style="border:none; text-decoration:none;" /> et texte d'accompagnement</a>

Test:

 Image de test et texte d'accompagnement

Résultats:

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="#">&nbsp;<img alt="Image de test" src="test.png"
	style="border:none; vertical-align:middle;" /> et texte d'accompagnement</a>

Test:

 Image de test et texte d'accompagnement

Résultats:

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="#">&nbsp;<img alt="Image de test" src="test.png"
	style="border:none; text-decoration:underline;" /> et texte d'accompagnement</a>

Test:

 Image de test et texte d'accompagnement

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:

  1. texte et images des liens soulignés dans tous les navigateurs;
  2. 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).