Chrome CSS 高度属性与 Firefox 不同？答案

【问题标题】：Chrome CSS Height Property different from Firefox?Chrome CSS 高度属性与 Firefox 不同？
【发布时间】：2012-09-06 03:42:55
【问题描述】：

我正在尝试显示一个实际上是 .png 图像的小块。

我使用 css 将小块的图像属性设置为 2% 宽度和 2% 高度。

此图像在主体内部，设置为 100% 宽度和 100% 高度。

我的问题是，图像在 Firefox 中正确显示，例如，它看起来像一个正方形，但在 Chrome 中，它看起来像一个矩形。图像宽度似乎正确 (2%)，但高度似乎不正确。

这里有图片来说明我的例子：

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

Chrome：（这是我不想要的。我希望它看起来像它在 Firefox 中的样子）。

我正在使用带有 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%;
}

就是这样。如果你们知道问题是什么，请告诉我，任何帮助将不胜感激。谢谢！

【问题讨论】：

标签： javascript html css

【解决方案1】：

Firefox 和 chrome 上的窗口大小可能不同。在这种情况下，使用像素值而不是百分比。

img 
{
    height: 50px;
    width: 50px;
}

【讨论】：

【解决方案2】：

尝试将* {margin:0;padding:0} 添加到您的 css 文件的开头。

还要考虑添加 CSS 重置

编辑：

现在我想了想，你确定 bgimage.png 存在于那个目录中吗？你也可以尝试在你的javascript中设置img.width和img.height，就像这样

http://jsfiddle.net/2Uk53/1/

【讨论】：

【解决方案3】：

您的 body 可能设置为 height: 100%，但其父容器 (html) 不是。

【讨论】：