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。我正在使用精灵来绘制实际的图标。我怀疑这个问题与锚标签有关，因为其他图像没有这个问题。

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

Answer 2

您正在通过CSS指定图像。除非你真的想要两张图片，否则你根本不应该使用<img>标记 - 只需使用CSS将<a>显示为display: inline-block并在那里添加背景图片。

Answer 3

您使用的<img>代码使用了错误的属性（href）。由于您使用CSS添加图像，因此您应遵循使用<span>

的一般做法

<div id="socialIcons"> 
 <a href="#"><span id="fbIcon" width="24" height="24"  ></span></a>
 <a href="#"><span id="gpIcon" width="24" height="24"  ></span></a>
 <a href="#"><span id="twIcon" width="24" height="24"  ></span></a>
 <a href="#"><span id="piIcon" width="24" height="24"  ></span></a>
</div>

CSS

#socialIcons > a > span {
    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;
}

参见工作fiddle（在IE10上测试）