如何擺脫<img>標籤中的默認輪廓？

<img class="image_cover" src = "" /> 

.image_cover { 
    width:25px; 
    height:25px; 
    border-style:none; 
    border: 0; 
    box-shadow:none; 
}

我展示它在這裏提琴：jsfiddle 如何擺脫<img>標籤中的默認輪廓？

在Chrome的版本33.0.1750.152，我看到過<img>標籤的盒子（境）。我正試圖擺脫它。

我跟着輸入看過來：Removing the image border in Chrome/IE9，並設置border，border-style和box-shadow屬性，但我仍然可以看到它周圍的邊框。

我該如何解決這個問題？

來源

2014-03-28 Louis93

邊境有值「無」同時輪廓可設置爲「0」 –

CSS

img { 
    Border: none; 
}

試試這個，它應該刪除任何默認邊框

來源

2014-03-28 15:16:41 Chris

不起作用。 http://jsfiddle.net/H4TNw/10/ – Louis93

@ Louis93它可以在SRC中放置圖像時使用。這樣可以防止出現在任何其他瀏覽器周圍的任何邊框img – Chris

鉻automaticaly呈現一個邊界img標籤與空src屬性。

解決方法是在此圖像標記中放置透明png或gif。

來源

2014-03-28 15:19:11

這是因爲你沒有指定源。一旦你指定了一個SRC，這應該不再是一個問題。

來源

2014-03-28 15:19:35

由於您未將src屬性設置爲有效的圖像url，所以顯示了輪廓。

來源

2014-03-28 15:20:49 Bilal

擺脫輪廓是通過使其透明來完成的。

img{  
    border-color:transparent; 
}

來源

2014-03-28 15:23:08

此解決方案是否工作？ – Muhammed

與其他人一樣，由於SRC爲空，因此提及了邊界。如果src不爲空，則可以使用border:none更改邊框。然而，這是因爲<img>標籤上沒有src的默認瀏覽器行爲，這就是爲什麼border:none不起作用的原因。

如果因任何原因，你想有一個空src時，您可以做到這一點。但我不知道你爲什麼會想一個圖像標記沒有SRC

<img class="image_cover" src="" /> 

.image_cover { 
    width:25px; 
    height:25px; 
    content: ""; 
}

DEMO：

http://jsfiddle.net/krishollenbeck/H4TNw/8/

來源

2014-03-28 15:29:14

不錯的修復。這在重複問題上沒有想到。 – andyb

如何擺脫<img>標籤中的默認輪廓？

回答

相關問題