删除图片周围的默认边框 - Chrome浏览器

Question

我不敢相信我是第一次遇到这个问题.关于同样的问题,我在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)outline:none 3)将img类更改为img id

4)设置

a img {
  border:none
} 

a img {
  border:0
}

Answer 1

您的<img>标记没有src属性,因为您使用css设置背景.

<img class="icon_406">

这是无效的html - 如果您打算通过css使用实现图标<span>或类似的不需要src按规范的属性.或者通过元素的src属性加载图像图标<img>.

Chrome显示边框,因为它找不到图像(就像src内部链接断开一样) - 但是图标显示,因为css仍然可以将类样式应用于空<img>元素.

Answer 2

替换 IMG 标签宽度 DIV，它应该可以工作:)