删除图像周围的默认边框 - Chrome 浏览器答案

【问题标题】：Removing default border around an image - Chrome browser删除图像周围的默认边框 - Chrome 浏览器
【发布时间】：2014-02-28 13:44:46
【问题描述】：

我不敢相信我第一次遇到这个问题。关于同一问题，我搜索了很多关于 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)边框：0 2）大纲：无 3）将img类更改为img id

4)设置

a img {
  border:none
} 

a img {
  border:0
}

【问题讨论】：

标签： html css google-chrome

【解决方案1】：

您的<img> 标签没有src 属性，因为您使用css 设置背景。

<img class="icon_406">

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

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

【讨论】：

太棒了。我将 img 标签替换为我的 JS 中的 span，它完美地工作。
@Nish - 我相信你 :) - 如果它解决了你的问题，请接受答案。
“Chrome 显示一个边框，因为它找不到图像”，这是一个关键语句。事实上，我只是在代码中添加了图像，现在边框已经消失了

【解决方案2】：

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

【讨论】：

您可以在我的原始帖子中看到。我已经尝试过该解决方案。
我在你的网站上试过这个，使用谷歌开发者工具栏，效果很好:) 这是截图：i.imgur.com/iK57iFG.png
我的错误。我以为你想说用替换我的脑子被占用了 :-)

【解决方案3】：

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

表示添加以下css：

a img {
  border: none;
}

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

* {
   border: none !important;
}

但我不推荐第二个代码，因为它可能会产生其他问题，第二个代码只是为了测试边框是否有问题。

【讨论】：

这不起作用。但是，将 img 替换为 span 标签效果很好，因为我通过 CSS 显示图像而不是 src 属性。

【解决方案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 中测试。

【讨论】：