Chrome CSS高度屬性與Firefox不同？

我正在嘗試顯示一個小塊，它實際上是一個.png圖像。Chrome CSS高度屬性與Firefox不同？

我使用css設置小塊的圖像屬性具有2％的寬度和2％的高度。

此圖像位於身體內部，其寬度爲100％，高度爲100％。

我的問題是，圖像在Firefox中正確顯示，因爲它看起來像一個正方形，但在Chrome中，它看起來像一個矩形。圖像寬度似乎是正確的（2％），但高度似乎不正確。

這裏有圖片來說明我的例子：

火狐：（這就是我想要的）

enter image description here

鉻：（這是我不想要什麼，我希望它看起來就像它在firefox中的樣子）。

enter image description here

我使用的是內部的JavaScript和CSS和HTML這裏是我的代碼：

<!DOCTYPE html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" href="testlayout.css" /> 
<script>  

var x; 

function myFunction() 
{     
    var img = new Image(); 
    img.src = 'bgimage.png'; 
    document.body.appendChild(img);          
}; 

</script> 
</head> 
<body onload="myFunction()"> 

</body> 
</html>

這是我的CSS：

body 
{ 
margin:0; padding: 0; cellspacing: 0; 
line-height: 0; /* removes gap betwen rows */ 
height: 100%; 
width: 100%; 
} 

img 
{ 
height: 2%; 
width: 2%; 
}

這就是全部。如果你們知道問題出在哪裏，請讓我知道，任何幫助將不勝感激。謝謝！

來源

2012-09-13 r1nzler