html - IE10 img 标签中的这个奇怪图标是什么？

Question

我在 IE10 中遇到这个奇怪的问题，我网站的社交网络图标顶部有一个奇怪的图形:

我似乎无法摆脱它们。我尝试将边框、填充、边距、轮廓全部设置为零，但没有任何效果。这是 HTML:

<div id="socialIcons">
    <a href="#"><img id="fbIcon" width="24" height="24" href="one.png" /></a>
    <a href="#"><img id="gpIcon" width="24" height="24" href="one.png" /></a>
    <a href="#"><img id="twIcon" width="24" height="24" href="one.png" /></a>
    <a href="#"><img id="piIcon" width="24" height="24" href="one.png" /></a>
</div>

和 CSS:

#socialIcons > a > img {
float:left;
width: 24px;
height: 24px;
background-image: url(../img/icons.png);
}
#gpIcon {
background-position: -24px 0;
}
#twIcon {
background-position: -48px 0;
}
#piIcon {
background-position: -72px 0;
}

one.png 是一个 1x1 的透明 png。我正在使用 Sprite 来绘制实际的图标。我怀疑这个问题与 anchor 标签有关，因为其他图像没有这个问题。

Answer 1

<img id="fbIcon" width="24" height="24" href="one.png" />

应该是

<img id="fbIcon" width="24" height="24" src="one.png" />

img 标签没有 href 属性。引用 W3C HTML/Elements/img