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

标签 html css internet-explorer internet-explorer-10

我在 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 标签有关,因为其他图像没有这个问题。

最佳答案

<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

关于html - IE10 img 标签中的这个奇怪图标是什么?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17649734/

相关文章:

html - 是否可以对印度字符的不同部分应用不同的颜色?

javascript - 当有人使用 escape 或 f11 (JAVASCRIPT) 退出全屏时自动取消选中复选框

javascript - 由于向上滚动图标,空白仅出现在移动 View 中

javascript - 文本框的字符限制

css - Chrome 77.0.3865.90 使用 margin-left : -100% 搞乱布局

css - IE 8 上的定位和图像透明失败

css - 如何增加 scss 变量?

css - 鼠标悬停在 CSS3 中

javascript - Google Map API 警告消息不支持 IE9

jquery - 网站未在 IE 中加载 jQuery 图像轮播