Chrome CSS Height Property different from Firefox?
Question
I'm trying do display a little block which is actually a .png image.
I set the image properties of the little block using css to have 2% width and 2% height.
This image is inside the body, which is set at 100% width, and 100% height.
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. The image width seems to be correct (2%) but the height seems to not be correct.
Here are pics to illustrate my example:
Firefox: (this is what i want)
Chrome: (this is what I do not want. I want it to look like how it looks in firefox).
I'm using html with javascript inside and css and here's my code:
<!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:
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 answers
solution1
1 2012-09-13 05:11:12
Window sizes on firefox and chrome can differ. In this kind of situations use pixel values instead of percents.
img
{
height: 50px;
width: 50px;
}
solution2
0 2012-09-13 05:09:23
try adding a * {margin:0;padding:0} to the beginning of your css file.
Also look into adding a CSS Reset
edit:
Now that I think about it, are you sure bgimage.png exists in that directory? You could also try setting img.width and img.height within your javascript sort of like this
solution3
0 2012-09-13 12:04:56
您的身体可能设置为height: 100% ，但其父容器（html）并未设置。
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.