给出的是以下页面(SSCCE，就像我们都喜欢的那样):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
* {
border:0;
margin:0;
padding:0;
}
body {
background:#BCD5E1;
font:.85em Verdana;
}
#flag_panel {
position:absolute;
right:15px;
top:20px;
}
#flag_panel img {
vertical-align:middle;
}
#flag_panel .selected_image {
border:solid 2px #444;
padding:5px;
}
</style>
</head>
<body>
<div id="flag_panel">
<a href="#">
<img src="ro.gif" />
</a>
<img class="selected_image" src="us.gif" />
</div>
</body>
</html>
此 HTML 文件连同 2 个图像可在 URL 中找到:image-problem.zip (1.6 KB)
预期的结果是:
但实际结果是:
如您所见，两张图片之间有一条小下划线。我不明白为什么。
我在 Firefox v24 和 Chrome v31 中试过这段代码。所以我很确定是我遗漏了什么。
我注意到这个问题在两种情况下消失了:
- 如果
<img class="selected_image"...在<a href="#"...之前(也就是如果它们被交换) - 如果第一张图片没有包含在 achor 标签内 (
<a>)。
这段代码的目标是能够在我拥有的网站上在英语和罗马尼亚语之间切换语言。因此，其中一张图片必须始终有边框，而另一张图片必须始终可点击。但我希望能够在不出现下划线的情况下执行此操作(看起来很难看/有问题)。
关于如何解决这个问题的任何想法？谢谢。
最佳答案
将 a 标签元素及其内容放在一行中，如:<a href="#"><img src="ro.gif" /></a>
编辑:
text-decoration: none;方法仍然为您留下可点击的空白区域。
关于html - 如何删除图片旁边的下划线？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20220167/