如何隐藏<img/>标记的边框（当img加载错误时）

Question

虽然标签中没有“src”属性或链接到不存在的资源的“src”，但是会在标签外显示边框。 像这样 // html代码：

<div class="example" style="height:70px;width:100px">
<img src="404error.html">
</div>

在Firefox中

//↑↑↑

chrome中的

//↑↑↑

// css code

.example img{
display:inline-block
height:30px;
margin:20px;
}

如何隐藏此边框// border：none;没用了

此外，还有另一种眩晕现象。  也就是说，当我将“line-height”设置为标签时，我说的img的边框将向下移动，因此它看起来根本不在图片周围。 它只是出现在chrome中，但不是在firefox中。 像这样。

在Firefox中

//↑↑↑

chrome中的

//↑↑↑

// css code

.example img{
display:inline-block
height:30px;
margin:20px;
line-height:70px; //this is the difference
}

P.S。我使用“line-height”只是为了不是imgs.when我设置.img {line-height：0;}它返回。我只想知道为什么。以及如何隐藏边框。 感谢。

Answer 1

https://jsfiddle.net/s3Lvr9bs/1/

<div class="example">
    <object data="https://developers.google.com/+/images/branding/button-gplus.png" type="image/jpg">
    <img src="404error.html" alt="" />
    </object>
</div>


.example {
 display:inline-block;
 background:#444;
 border-radius: 5px; 
 padding:5px;
 min-width:30px; min-height:30px;
}
object {display:block;}

你需要：

• img alt =“”（隐藏在Firefox中）
• 对象数据（获取图像的网址）
• 对象显示块，用于删除边距。