Как удалить границы вокруг сломанных изображений в webkit?

Может кто-нибудь посоветует мне об этом? Браузеры WebKit продолжают помещать серию 1px в рамки отключенных изображений. Причина, по которой я нуждаюсь в этом, заключается в оптимизации электронной почты, когда у почтовых клиентов отключены изображения. Прекрасно работает в Firefox, но браузеры WebKit продолжают показывать границу.

Я пробовал border:none !important всюду, включая встроенный, но Chrome/Safari упрямы.

Изменить: Вот пример html с встроенным 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

Невозможно удалить его, но я обернул изображение в элементе, у которого есть скрытое свойство переполнения в его стилях.

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

Ответ 2

Ответ Амита - это просто замечательно, но маленький совет: используйте видимость: скрыто; вместо дисплея: нет;

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

так что вы можете сохранить размер блока img и расположение других элементов. в большинстве случаев он полезен, я использую его на своих сайтах с отложенной загрузкой изображений и показываю пустой блок перед загрузкой изображения.

Ответ 3

Если img src нет или не работает, используйте ниже css code

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

этот css скрыть изображение до img src не загружен полностью.

Ответ 4

Браузеры, похоже, не дают вам возможности удалить эту границу. Самое простое решение - изменить ваш img на div и применить изображение в качестве фона.

Таким образом, если нет src, вы не получите значок и границу сломанного изображения.

Обновление: Microsoft Outlook затрудняет работу, и лечение почти хуже, чем болезнь: векторный язык разметки, элементы формы, элементы imagedata и т.д. Если вы google вокруг, вы увидите, как их использовать http://blog.oxagile.com/2010/04/23/background-images-for-outlook-2007-and-outlook-2010-beta/

Пользователям Outlook просто придется обойтись без изображения, чтобы вы могли называть его днем.

Ответ 5

Попробуйте использовать некоторый 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 срабатывает, когда изображение не загружено

Ответ 6

Вы можете попробовать этот код, чтобы удалить границы вокруг сломанных изображений в webkit.

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

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