Question

有人可以就此提出建议吗？ 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" />

Answer 1

阿米特的答案很棒，但是一个小建议：使用 visibility：hidden; 而不是 display：none;

img:not([src]) {
   visibility: hidden;
}

因此您可以保存img块大小和其他元素的位置。它在大多数情况下很有用，我在我的网站上使用图像 lazyload ，并在图片加载前显示空白块。

Answer 2

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

<!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>

看看这个垃圾箱 http://jsbin.com/OpAyAZa/1/edit

Answer 3

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

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

此css隐藏图片，直到img src未完全加载。

Answer 4

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

这样，如果没有src，你就不会得到破损的图片图标和边框。

更新：Microsoft Outlook使事情变得困难，并且治愈几乎比疾病更糟糕：矢量标记语言，形状元素，图像数据元素等。如果你在谷歌周围，你会看到如何使用它们{{3 }}

Outlook用户可能只需要不使用图像就可以在一天内调用它。

Answer 5

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

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

因为破损图像的渲染因浏览器而异，因此无法更改。

P.S：onerror将在未加载图像时触发

Answer 6

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

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

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

如何删除webkit中损坏图像的边框？

6 个答案: