html - 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 我遇到这个问题的是 Google Chrome - 我目前还没有在任何其他浏览器中检查过它。

Answer 1

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

你可以通过 float 将图像变成 block 元素，这样它们就不是文本的一部分了:

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