我无法相信我是第一次遇到这个问题。关于同样的问题,我在SO上搜索了很多其他类似的问题,但是没有一个能为我工作。
我在锚标记下有一个带有class属性的img标记。
所以我的html看起来像:
<ul id="racing-menu" class="accordion-menu list-unstyled">
<li>
<a id"something" name class"something">
<img class="icon_71">
</a>
</li>
</ul>
CSS
.icon_71 {
background: url(../../cms/images/sports/something.png) no-repeat;
width: 36px;
height: 22px;
margin: 0 10px 0 0;
float: left;
}
我尝试了以下解决方案,以避免Chrome浏览器上的默认边框
1)border:0 2)概述:无 3)将img类更改为img id
4)设置
a img {
border:none
}
a img {
border:0
}
答案 0 :(得分:17)
由于您使用css设置背景,因此<img>
标记没有src
属性。
<img class="icon_406">
这是无效的html - 如果您打算通过css使用<span>
或类似的,通过规范不需要src
属性来实现图标。或者通过src
元素的<img>
属性加载图片图标。
Chrome会显示边框,因为它无法找到图像(就像src
内部链接断开一样) - 但图标显示,因为css仍然可以将类样式应用于空{{1元素。
答案 1 :(得分:4)
替换IMG标签宽度DIV,它应该工作:)
答案 2 :(得分:1)
尝试用'a'替换'img'。
表示添加以下css:
a img {
border: none;
}
你也可以尝试一些不好的东西来测试边框是否有问题:
* {
border: none !important;
}
但我不建议使用第二个代码,因为它可能会产生其他问题,第二个代码只是为了测试边框是否存在问题。
答案 3 :(得分:0)
您可以使用<img>
,但是将src
属性设置为空字符串。
// Get an HTMLImageElement anyway you want.
document.querySelectorAll('img').forEach(function(img) {
// This can also be used to abort an image load.
img.src = '';
});
仅在Chrome中进行了测试。