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

有人能告诉我这个吗？ WebKit浏览器不断在禁用的图像周围放置1px的灰色边框。我需要删除的原因是为了在电子邮件客户端禁用图像时进行电子邮件优化。在Firefox中正常工作，但WebKit浏览器不断显示边框。如何删除webkit中破损图像的边框？

我试过border:none !important无处不在，包括内联，但Chrome/Safari正在固执。

编辑：这里是内联CSS

<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" />

来源

2012-10-31 Van Nguyen

用于-webkit边界：0; –

你的意思是这样的：表，IMG {-webkit-边界：0重要;}？还是行不通。 –

可以u显示代码HTML或CSS –

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

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

来源

2013-11-27 07:46:31

尼斯一个，让我测试它对面的电子邮件客户端 –

尝试使用JavaScript来去除碎图像样本HTML。这是唯一的方法

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：当图像不加载

来源

2012-10-31 04:47:45 naveen

谢谢，但这是电子邮件所以JavaScript不可用。 –

然后尝试hilsons解决方案。那是一个更好的主意 – naveen

浏览器似乎并没有真正给你一个方法来去除边框onerror会火。您最简单的解决方案是将您的img更改为div并将图像用作背景。

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

更新：Microsoft Outlook中刁难，治愈率几乎是比疾病更糟糕：如果谷歌你周围会看到如何使用它们http://blog.oxagile.com/2010/04/23/background-images-for-outlook-2007-and-outlook-2010-beta/

矢量标记语言，造型元素，图象 - 元素等

Outlook用户可能不得不不带图片，以便您可以在一天内打电话。

来源

2012-10-31 04:49:27

呀已经想到了这一点，但电子邮件真的不喜欢的背景图片（前景是这种情况的罪魁祸首） –

酷，我会接受这个现在，希望对某种CSS破解的覆盖的webkit默认的CSS。 –

如果imgsrc不存在或中断，则使用下面css代码

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

这个CSS隐藏图像，直到imgsrc未完全加载。

来源

2015-10-28 09:26:23 Amit

谢谢，但是我们如何内联伪样式？ –

艾米特的回答太好了，但小建议：使用知名度：隐藏;而不是display：none;

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

，所以你可以保存IMG块大小等元素的定位。它在大多数情况下是有用的，我在我的网站上使用它的图像lazyload并且在图像加载之前仅显示空白块。

来源

2015-12-10 15:22:52 kabantejay

谢谢！这是唯一对我有用的东西:) – Michael

使用延迟加载时，这是一个很好的解决方案。 –

-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-13 05:46:59

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

回答

相关问题