How to remove borders around broken images in webkit?

问题

Can anybody advise me on this? WebKit browsers keeps on putting a gray 1px border around disabled images. The reason I need this removed is for email optimization for when email clients have images disabled. Works fine in Firefox, but WebKit browsers keep showing the border.

I have tried border:none !important everywhere including inline, but Chrome/Safari are being stubborn.

Edit: Here is sample html with inline 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" />

回答1:

There is no way to remove it but I wrapped the image in an element that has overflow hidden property in its styles.

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

Take a look at this bin http://jsbin.com/OpAyAZa/1/edit

回答2:

Amit's answer is just great, but a small advice: use visibility: hidden; instead of display: none;

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

so you could save img block size and positioning of other elements. its usefull in most cases, i use it on my sites with images lazyload and show just blank block before the image loads.

回答3:

If img src is not present or broken then use below css code

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

this css hide image till img src is not loaded completely.

回答4:

Browsers don't seem to really give you a way to remove that border. Your simplest solution is to change your img to a div and apply the image as a background.

That way, if there's no src, you won't get the broken image icon and border.

Update: Microsoft Outlook makes things difficult, and the cure is almost worse than the disease: vector markup language, shape elements, imagedata elements, etc. If you google around you'll see how to use them http://blog.oxagile.com/2010/04/23/background-images-for-outlook-2007-and-outlook-2010-beta/

Outlook users might just have to go without the image so that you can call it a day.

回答5:

Try using some JavaScript to remove the broken image. Thats the only way

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

Because rendering of broken image varies from browser to browser and it could not be altered.

P.S: onerror will fire when the image is not loaded

回答6:

You can try this code to remove borders around broken images in webkit.

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

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

来源：https://stackoverflow.com/questions/13151340/how-to-remove-borders-around-broken-images-in-webkit

标签

html

css

webkit

html-email