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

我有这个奇怪的问题在IE10，那里有我的网站的社交网络图标都在他们顶部一个奇怪的图形：IE10 img标签中这个奇怪的图标是什么？

我似乎无法摆脱他们。我尝试将边框，填充，边距，轮廓设置为零，但没有任何效果。下面是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。我使用精灵来绘制实际的图标。我怀疑这个问题与锚标记有关，因为其他图像没有这个问题。

来源

2013-07-15 Ermir

看起来像一个丢失的图像图标。可能是因为你的图片标签不对。 –

在这种情况下，IE浏览器支持IE，而其他浏览器则显示错误，这些浏览器默默无闻。 – Ermir

你为什么在这里使用'img'标签？它没有任何意义。为什么不把所有样式直接放在'a'标签上？ – RoToRa

<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-15 08:26:59 bansi

是的，那真是愚蠢的我。你的建议修正了它，谢谢。 – Ermir

实际上，他通过CSS设置图像，所以它甚至不需要'src'属性。 – webnoob

@webnoob：在这种情况下，他不应该首先使用img标签。 – ThiefMaster

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

来源

2013-07-15 08:33:03 ThiefMaster

我使用了一个带有js的div，它解决了IE和Chrome中的问题。 Chrome没有图标，但显示了所有标题文字。 –

您正在使用具有错误属性的<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测试）的一般做法

来源

2013-07-15 08:38:49

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

回答

相关问题