如何刪除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中破損圖像的邊框？

回答

相關問題