Chrome和Safari添加'邊框線'img與CSS固定的高度和寬度

我有一個小問題，呈現與類關聯的img標記。我用一個簡單的html頁面重新創建了這個問題。Chrome和Safari添加'邊框線'img與CSS固定的高度和寬度

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<title>Test for image problem</title> 
</head> 
<body> 
<style> 
.image { 
    float: left; 
    cursor: pointer; 
    height:15px; 
    width:15px; 
} 
</style> 
    <p>This is a test </p> 
    <img class="image" id="image"> 
</body> 
</html>

任何人都知道如何在所有瀏覽器中具有相同的行爲？

來源

2010-09-14 Sergio Couture

這是一個破碎的圖像，因爲你指定沒有src。將src指向某處並且邊框消失。

瀏覽器渲染破碎的圖像變化很大很大跨瀏覽器，並取決於你是否包含alt屬性（你總是應該）。一個1px的內部邊界通常在破碎的圖像中繪製，而不僅僅是Webkit。您不應該故意在文檔中包含損壞或無圖像的圖像。如果你不想要src，它不應該是<img>。

來源

2010-09-14 14:37:10 bobince

是的，Chrome和Safari做到這一點img標籤沒有hrefs ...有點愚蠢，但你可以做的是讓img成爲一個'a'，'div'或'span'標籤給你。也可能想要添加「display：inline-block」來模仿html5 img標籤。希望這會有所幫助，我花了一段時間才找到Bobince的答案。

來源

2012-11-20 04:05:35 Protonova

Chrome和Safari添加'邊框線'img與CSS固定的高度和寬度

回答

相關問題