Chrome CSS Height属性与Firefox不同吗？
[英]Chrome CSS Height Property different from Firefox?
问题描述
I'm trying do display a little block which is actually a .png image. 
我正在尝试显示一个实际上是.png图像的小块。
I set the image properties of the little block using css to have 2% width and 2% height. 我使用CSS将小块的图像属性设置为2％的宽度和2％的高度。
This image is inside the body, which is set at 100% width, and 100% height. 此图像在体内，设置为100％的宽度和100％的高度。
My problem is, the image comes out correctly in firefox, as in, it looks like a square, but in Chrome, it looks like a rectangle. 我的问题是，在Firefox中图像可以正确显示，因为它看起来像一个正方形，但是在Chrome中，它看起来像一个矩形。 The image width seems to be correct (2%) but the height seems to not be correct. 图像宽度似乎正确（2％），但高度似乎不正确。
Here are pics to illustrate my example: 这里有图片来说明我的例子：
Firefox: (this is what i want) Firefox ：（这就是我想要的）
Chrome: (this is what I do not want. I want it to look like how it looks in firefox). Chrome ：（这不是我想要的。我希望它看起来像在Firefox中的样子）。
I'm using html with javascript inside and css and here's my code: 我使用的是带有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>
And here's my css: 这是我的CSS：
body
{
margin:0; padding: 0; cellspacing: 0;
line-height: 0; /* removes gap betwen rows */
height: 100%;
width: 100%;
}
img
{
height: 2%;
width: 2%;
}
That's all. 就这样。 If you guys know what the problem is, please let me know, any help will be greatly appreciated. 如果你们知道问题出在哪里，请告诉我，我们将不胜感激。 Thanks! 谢谢！
3 个解决方案
解决方案1
1 2012-09-13 05:11:12
Window sizes on firefox and chrome can differ. Firefox和Chrome上的窗口大小可能会有所不同。 In this kind of situations use pixel values instead of percents. 在这种情况下，请使用像素值而不是百分比。
img
{
height: 50px;
width: 50px;
}
解决方案2
0 2012-09-13 05:09:23
try adding a * {margin:0;padding:0} to the beginning of your css file. 尝试在CSS文件的开头添加* {margin:0;padding:0} 。
Also look into adding a CSS Reset 还可以考虑添加CSS重置
edit: 编辑：
Now that I think about it, are you sure bgimage.png exists in that directory? 现在，我考虑一下，您确定该目录中存在bgimage.png吗？ You could also try setting img.width and img.height within your javascript sort of like this 您也可以尝试在javascript中像这样设置img.width和img.height
解决方案3
0 2012-09-13 12:04:56
您的身体可能设置为height: 100% ，但其父容器（html）并未设置。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.