Doctype html issue
I'm making a page that uses a WYSIWYG editor. Like most editors, it puts everything in "<p>" tags.
This gives a formatting problem when an image has 100% height and width.
The following html shows the issue:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>No doc type</title>
<style type="text/css">
/* css reset */
* {
vertical-align: baseline;
font-family: inherit;
border: 0 none;
outline: 0;
padding: 0;
margin: 0;
}
html{
font-size:100%;
height: 100%;
}
body{
height: 100%;
font-size:62.5%; /* Reduce to 10px base */
font-family:Arial, Helvetica, sans-serif;
}
</style>
</head>
<body style="margin:0;">
<div>
<div style="width: 500px; height: 200px;">
<div>
<div style="border:1px solid #000; padding: 0; width: 498px; height: 198px;">
<p>
<img style="height: 100%; width: 100%;" src="http://www.google.com/logos/newyears10.g开发者_如何转开发if"/>
</p>
</div>
</div>
</div>
</div>
</body>
</html>
In firefox, the p tag actually overflows the div. This makes the image at 100% height be more than 100% of the div.
If I remove the doctype the problem is fixed. I don't really understand doctypes, but I think the one I used was a good one (I googled it). I think it's bad not to use one.
Anyone know how to get this to display correctly with a doctype?
Thanks
I'm not sure what else you may be doing with the page, but adjusting the paragraph height will correct the output.
div p{ height: 100%; }
As Zurahn wrote, setting the height of p will solve the problem.
To understand this (and arrive at other variations that might better serve you): 1. The image is natively 311 x 137 2. Because the p has no height, the image can figure out the width, but not the height, of the bounding element (the p). 3. The image therefore becomes as large as the width, and scales the image - creating a height of 219px 4. The p in turn then stretches to fit the image. 5. Giving a height to the p allows the image to know the height it should be getting 100% of. It can then scale the image accordingly. ouch, that was not written so well:
But now the q is - why doesn't it get the height from its ancestor - the same way that it got the width from the ancestor?
And the answer to that has to do with the way height is mangled by the browser, which in turn has to do with the allowances given by the browser for things overflowing to the height before allowing an overflow to the width.
I think I have the same problem as you. The doctype html adds a spacing at the bottom of the page. Here is a few solutions. You can add one of the attributes to the image.
style="display:block"- add align attribute like
align="absmiddle" - add float like
style="float:left"
加载中,请稍侯......
精彩评论