如何在html中删除这个奇怪的标记？

Question

在这篇HTML中，

    <div>
        <a href="http://www.facebook.com/" target="_blank">
            <img border="0" width="26" height="25" src="facebook.gif" alt="Facebook"/>
        </a>
        &nbsp;&nbsp;&nbsp;
        <a href="http://twitter.com/" target="_blank">
            <img border="0" width="26" height="25" src="twitter.gif" alt="Twitter"/>
        </a>
    </div>

当它在浏览器中显示时，第一张图像旁边会有一个小标记。为什么会出现，我该如何删除它？

这是一张展示它的图片：

Answer 1

尝试为上面的两个链接设置text-decoration: none。

您遇到的问题是默认情况下链接带有下划线，并且在导致空白字符的图像后面可能存在换行符，默认text-decoration: underline;下方显示下划线那个白色空间的角色。

Answer 2

删除<img ...>和</a>之间的空格，如下所示：

<div>
    <a href="http://www.facebook.com/" target="_blank">
        <img border="0" width="26" height="25" src="facebook.gif" alt="Facebook"/></a>
    &nbsp;&nbsp;&nbsp;
    <a href="http://twitter.com/" target="_blank">
        <img border="0" width="26" height="25" src="twitter.gif" alt="Twitter"/></a>
</div>

Answer 3

我不知道原因，因为我长期以来一直在努力解决这个问题（与白色空间有关）。但是，我发现如果你将显示设置为内联块，这个问题就会消失。

a { display: inline-block; }

看到这个小提琴：http://jsfiddle.net/mznMY/

Answer 4

您正在使用包含下划线符号

的a锚点

将text-decoration: none放入a。