16

有人可以建议我吗？WebKit 浏览器继续在禁用的图像周围放置一个灰色的 1px 边框。我需要删除它的原因是为了在电子邮件客户端禁用图像时进行电子邮件优化。在 Firefox 中运行良好，但 WebKit 浏览器一直显示边框。

我已经尝试过border:none !important包括内联在内的所有地方，但 Chrome/Safari 很固执。

编辑：这是带有内联 css 的示例 html

<img style="outline:none;text-decoration:none;display:block;border:none;-webkit-border:0;" border="0" src="images/rm_bnk.gif" width="10" height="10" alt="test" />
4

6 回答 6

22

阿米特的回答很好，但有一个小建议：使用可见性：隐藏；而不是显示：无；

img:not([src]) {
   visibility: hidden;
}
  • 所以你可以保存 img 块的大小和其他元素的位置。它在大多数情况下很有用，我在我的网站上使用它来延迟加载图像，并在图像加载之前只显示空白块。
于 2015-12-10T15:22:52.737 回答
7

如果img src不存在或损坏，则使用以下css代码

img:not([src]){ display:none; }

这个 css 隐藏图像直到img src没有完全加载。

于 2015-10-28T09:26:23.907 回答
6

无法删除它，但我将图像包装在一个元素中，该元素在其样式中具有溢出隐藏属性。

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Hide Broken Image border</title>
  <style>
    body{
      background-color:azure;
    }
    .image-container{
      width:100px;
      height:100px;
      overflow:hidden;
      display:block;
      background-color:orange; /*not necessary, just to show the image box, can be added to img*/
    }
    .image-container img{
      margin:-1px;
    }
  </style>
</head>
<body>
  <span class="image-container">
    <img src="path-to-image" alt="I'm Broken :(" width="102" height="102">
  </span>
</body>
</html>

看看这个 bin http://jsbin.com/OpAyAZa/1/edit

于 2013-11-27T07:46:31.000 回答
3

浏览器似乎并没有真正为您提供删除该边框的方法。您最简单的解决方案是将您的 img 更改为 div 并将图像用作背景。

这样，如果没有 src，您将不会得到损坏的图像图标和边框。

更新：Microsoft Outlook 使事情变得困难，治愈几乎比疾病更糟糕：矢量标记语言、形状元素、图像数据元素等。如果你在周围搜索一下，你会看到如何使用它们http://blog.oxagile。 com/2010/04/23/background-images-for-outlook-2007-and-outlook-2010-beta/

Outlook 用户可能只需要不使用该图像，这样您就可以收工了。

于 2012-10-31T04:49:27.753 回答
0

尝试使用一些 JavaScript 来删除损坏的图像。这是唯一的方法

var images = document.getElementsByTagName("img");
for (i = 0; i < images.length; i++) {
    var self  = images[i];
    self.onerror = function () {
        self.parentNode.removeChild(self);
    }
}

因为损坏图像的渲染因浏览器而异，并且无法更改。

PS：onerror图片未加载时会触发

于 2012-10-31T04:47:45.397 回答
-1

您可以尝试使用此代码来删除 webkit 中损坏图像周围的边框。

    var images = document.getElementsByTagName("img");

for (i = 0; i < images.length; i++) {
    var self  = images[i];
    self.onerror = function () {
        self.parentNode.removeChild(self);
    }
}
于 2017-01-13T05:46:59.110 回答