Les images liées CSS sont en train d'être soulignées (l'affichage "a" est bloqué)

Question

J'ai un menu pour lequel je voulais que tout l'espace autour du texte, dans chaque élément individuel, amène l'utilisateur à la page spécifiée. Je regardais autour sur le web et a trouvé que la meilleure solution est de régler l'affichage « a » pour bloquer, comme suit:

a { 
    display: block; 
    height: 100%; 
    text-decoration: underline; 
} 

J'ai réussi à obtenir ce travail parfaitement mais que vous voulez mettre des images dans certains d'entre eux - Comme une icône de calendrier pour l'option des événements. Je remarque qu'il est maintenant souligné les liens aussi. Y a-t-il un moyen de s'en débarrasser? Les liens ont un padding-right réglé à 5px si cela permet d'affiner la cause/solution.

Donc tout le code correspondant est comme suit:

a { 
    display: block; 
    height: 100%; 
    text-decoration: underline; 
} 
a > img { 
    text-decoration: none; 
    border: none; 
    padding-right: 5px; 
    width: 1.8em; 
    height: 1.8em; 
} 

Un grand merci à l'avance.

Cordialement,

Richard

PS Il est Google Chrome dans lequel j'ai ce problème - je l'ai pas actuellement vérifié dans tous les autres navigateurs.

Answer 1

Les images sont des éléments en ligne, elles sont donc traitées comme faisant partie du texte. Ce n'est pas l'image qui est soulignée, c'est le texte qui contient l'image qui est soulignée, donc cela n'aide pas à empêcher le soulignement de l'image.

Vous pouvez transformer les images en éléments de blocs en les faisant flotter, ils ne font pas partie du texte:

a > img { 
    float: left; 
    border: none; 
    padding-right: 5px; 
    width: 1.8em; 
    height: 1.8em; 
} 

Answer 2

Je pense que votre meilleure option est de se débarrasser de la propriété text-decoration souligné pour l'élément a, mettre le texte du lien dans une span avec classe commune, et appliquer text-decoration: underline à cette classe.

Answer 3

je courais dans le même doute. Les text-decoration ensemble à none fonctionne pour moi:

<a href="..." style="text-decoration:none;"> 
    <img src="..."> 
</a> 

Comme l'a dit befor, vous pouvez utiliser une classe pour rendre plus générique.

Belle question à propos, ça a l'air totalement étrange sur mon site quand j'ai vu quelques-uns en bas des images. Ensuite, je réalise que c'était un sous-jacent.