CSS链接图像带有下划线（“a”显示设置为阻止）

Question

我有一个菜单，我希望在每个单独的项目中，文本周围的所有空间都将用户带到指定的页面。我在网上环顾四周，发现最好的解决方案是将“a”显示设置为阻止，如下所示：

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

我已经设法让这个工作得很完美但是想把图像放在其中一些 - 就像事件选项的日历图标一样。我注意到它现在也在强调链接。有没有办法摆脱这个？这些链接的padding-right设置为5px，如果这有助于缩小原因/解决方案的范围。

所以相关的所有代码如下：

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

非常感谢提前。

此致

理查德

PS我在谷歌Chrome浏览器中遇到此问题 - 我目前尚未在任何其他浏览器中进行过检查。

Answer 1

图像是内联元素，因此它们被视为文本的一部分。这不是带下划线的图像，而是包含带下划线的图像的文本，因此它无助于防止图像下划线。

您可以通过浮动图像将图像转换为块元素，然后它们不是文本的一部分：

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

Answer 2

我认为您最好的选择是删除a元素的下划线文本修饰属性，将链接文本放在带有公共类的span中，然后应用text-decoration: underline那个班。

Answer 3

我遇到了同样的怀疑。设置为text-decoration的{​​{1}}对我有用：

none

正如所说的那样，你可以使用一个类来使它更通用。

顺便说一句好问题，当我在图片底部看到一些减号时，我的网站看起来很奇怪。然后我意识到那是潜在的。