请在此处查看代码.. JS Fiddle .有一个特殊的问题，蓝色下划线出现在第一张图片之后。为什么会这样？请注意，仅删除 href 会使它消失。很奇特的问题。应该怎么办？
HTML:
<body>
<div id="top-bar">
<a target="_blank" href="https://twitter.com/x">
<img class="twitter" src="images/twitter.png">
</a>
<a target="_blank">
<img class="twitter" src="images/twitter.png">
</a>
<a target="_blank" href="https://www.facebook.com/x">
<img id="fb" src="images/fb.png"
onmouseover="this.src='images/fb-hover.png'"
onmouseout="this.src='images/fb.png'">
</a>
</div>
</body>
CSS:
#top-bar {
height: 50px;
min-height: 50px;
max-height: 50px;
background-color: #166330;
}
body {
margin: 0;
padding: 0;
background-image: url(images/bg.png);
background-size: 100%;
color: white;
}
.twitter {
margin-left: 30px;
margin-top: 10px;
margin-right: 10px;
min-height: 30px;
min-width: 30px;
max-height: 30px;
max-width: 30px;
}
#fb {
min-height: 30px;
min-width: 30px;
max-height: 30px;
max-width: 30px;
}
最佳答案
有两种方法。
1] 删除所有 white spaces在 <a> 之间<img/>和 </a>标签。
2] 添加text-decoration:none;到 <a>元素。
关于javascript - HTML 视觉对象无法正确呈现，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24720973/