1

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

4

3 回答 3

4 
<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

于 2013-07-15T08:26:59.107 回答
3

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

于 2013-07-15T08:33:03.567 回答
2

您正在使用<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;
}

请参阅工作小提琴（在 IE10 上测试）

于 2013-07-15T08:38:49.627 回答