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）概述：无 3）将img类更改为img id

4）设置

a img {
  border:none
} 

a img {
  border:0
}

Answer 1

由于您使用css设置背景，因此<img>标记没有src属性。

<img class="icon_406">

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

Chrome会显示边框，因为它无法找到图像（就像src内部链接断开一样） - 但图标显示，因为css仍然可以将类样式应用于空{{1元素。

Answer 2

替换IMG标签宽度DIV，它应该工作：）

Answer 3

尝试用'a'替换'img'。

表示添加以下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中进行了测试。

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

4 个答案: