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

Question

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

有人可以就此提出建议吗？WebKit浏览器继续在禁用的图像周围放置一个灰色的1px边框.我需要删除此功能的原因是为电子邮件客户端禁用图像时的电子邮件优化.在Firefox中运行良好,但WebKit浏览器不断显示边框.

我已尝试过border:none !important包括内联在内的所有地方,但Chrome/Safari却很顽固.

编辑:这是带有内联css的示例html

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

Run Code Online (Sandbox Code Playgroud)

Answer 1

小智 14

阿米特的回答很棒,但是一个小建议:使用可见性:隐藏; 而不是display:none;

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

Run Code Online (Sandbox Code Playgroud)

所以你可以保存img块大小和其他元素的定位.它在大多数情况下很有用,我在我的网站上使用它与图像lazyload并在图像加载前显示空白块.

当使用延迟加载时，这是一个很好的解决方案。 (2认同)

Answer 2

小智 6

没有办法删除它,但我将图像包装在其样式中具有溢出隐藏属性的元素中.

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

Run Code Online (Sandbox Code Playgroud)

看看这个垃圾箱 http://jsbin.com/OpAyAZa/1/edit

Answer 3

Ami*_*mit 6

如果img src不存在或破坏,请使用下面的css代码

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

Run Code Online (Sandbox Code Playgroud)

这个css隐藏图像直到img src没有完全加载.

归档时间：	13 年，3 月前
查看次数：	14599 次
最近记录：	7 年前