如何隱藏<img>標記的邊界（當img加載錯誤時）

雖然標記中沒有「src」屬性或者鏈接到不存在的資源的「src」，但會顯示一個邊框的標籤。就這樣 // HTML代碼：如何隱藏<img>標記的邊界（當img加載錯誤時）

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

//↑↑↑在Firefox

//↑↑↑鉻

// css代碼

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

如何隱藏此邊框// border：none;是無用的

除此之外，還有另一種方式現象。也就是說，當我將「line-height」設置爲標籤時，我所說的img邊框將向下移動，因此它看起來不在圖片周圍。它只是出現在Chrome中，但不是在Firefox中。是這樣的。

//↑↑↑在Firefox

//↑↑↑在鉻

// CSS代碼

.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;}它返回。我只想知道爲什麼。以及如何隱藏邊框。謝謝。

來源

2015-11-02 孟子易

將圖像顯示出來：block。內聯塊有行高。塊沒有行高。 –

我試過了，但是看起來效果不好 –

你可以使用類似於：img [src ='']，img [src ='404error.html'] {border：none;}'？ – sideroxylon

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隱藏）
對象數據（獲取URL用於圖像）
對象顯示塊，去除利潤。

來源

2015-11-02 03:34:19

如何隱藏<img>標記的邊界（當img加載錯誤時）

回答

相關問題