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

问题描述 投票:11回答:6

有人可以就此提出建议吗? 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" />
html css webkit html-email
6个回答
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


12
投票

阿米特的回答很棒,但是一个小建议:使用可见性:隐藏;而不是display:none;

img:not([src]) {
   visibility: hidden;
}
  • 所以你可以保存img块大小和其他元素的定位。它在大多数情况下很有用,我在我的网站上使用它与图像lazyload并在图像加载前显示空白块。

6
投票

如果img src不存在或破坏,请使用以下css代码

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

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


3
投票

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

这样,如果没有src,您将无法获得损坏的图像图标和边框。

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

Outlook用户可能只需要没有图像,以便您可以每天调用它。


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);
    }
}

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

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


-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);
    }
}
© www.soinside.com 2019 - 2024. All rights reserved.