Question

我的代码存在问题，我的锚图像的右下角出现微小的下划线。我不知道如何解决它。我听说回答者提出其他类似的问题，说你必须在最后添加一个结束</a>标签，但这似乎不是问题，因为我已经在我的代码中包含了这些标签。我也不记得故意在我的代码中添加下划线，所以我不知道它是如何删除的。

<!DOCTYPE html>
<html>
<head></head>
<body style="background-image: url(https://img.michaels.com/L6/3/IOGLO/852866719/201341423/10151236.jpg?fit=inside|1024:1024);">
<button onclick="executeCommand()" style="border: 0; background: 0;"><img src="https://image.flaticon.com/icons/svg/54/54527.svg" style="padding: 5px 0px 0px 0px; width: 40px; height: 40px;"></button><div id="search"></div>
<br>
<a href="https://www.google.ca/" target="_blank"><img src="https://storage.googleapis.com/gweb-uniblog-publish-prod/images/Chrome__logo.max-2800x2800.png" alt="Google Chrome" style="width: 40px; height: 40px; padding: 0px 0px 5px 4px">
</a>
<br>
<a href="https://mail.google.com/" target="_blank"><img src="https://storage.googleapis.com/gweb-uniblog-publish-prod/images/Gmail_logo.max-2800x2800.png" alt="Google Mail" style="width: 40px; height: 40px; padding: 5px 0px 5px 4px">
</a>
<br>
<a href="https://docs.google.com/" target="_blank"><img src="https://seeklogo.com/images/G/google-docs-logo-6A8CD4F30A-seeklogo.com.png" alt="Google Docs" style="width: 30px; height: 40px; padding: 5px 0px 5px 9px">
</a>
<br>
<a href="https://www.youtube.com/" target="_blank"><img src="https://lh3.googleusercontent.com/Ned_Tu_ge6GgJZ_lIO_5mieIEmjDpq9kfgD05wapmvzcInvT4qQMxhxq_hEazf8ZsqA=w300" alt="Youtube" style="width: 40px; height: 40px; padding: 5px 0px 5px 4px">
</a>
</body>
</html>

Answer 1

添加此CSS行

a{
    text-decoration: none;
}

Answer 2

我遇到了同样的问题。这个人，就是答案： “将“a”标签直接放在“img”标签之后，即去掉换行符（将被解析为空格）。 – user3603486 Apr 1 '18 at 15:13"

查看我的示例 att：锚下划线：

下划线出现在图像锚点的末尾

2 个答案: