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

Question

我不敢相信我第一次遇到这个问题。我已经在SO上搜索了许多其他关于同一问题的类似问题，但没有一个对我有用。

我有一个 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）边框：02）大纲：无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属性的类似内容。或者通过<img>元素src属性加载图像图标。

Chrome 显示边框，因为它找不到图像（就像src里面有一个断开的链接一样） - 但图标会显示，因为 css 仍然能够将类样式应用于空的 <img> 元素。

Answer 2

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

Answer 3

尝试将"a img"替换为"a"。

表示添加以下 css：

a img {
  border: none;
} 

你也可以尝试一些不好的东西来测试边框是否是问题所在：

* {
   border: none !important;
}

但我不推荐第二个代码，因为它可能会产生其他问题，第二个代码只是用来测试边界是否是问题所在。

Answer 4

可以使用

<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 中测试。