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

Saeed Alipoor

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

kabantejay

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.

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.

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.

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

Pi Technologies Pvt. Ltd

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