strange html5 behavior
The following html(5) produces a black line at the bottom of the div. This is caused, because the div get's heigher than the contained image. But I wonder why this happens?
<!DOCTYPE html>
<html>
<body>
<div style="position:absolute; background:#000;">
<img src="http://images.google.com/intl/de_ALL/images/logos/images_logo_lg.gif" style="height:50px;">
</div>
</body>
</html>
I dont think it's a browser bug, because the result is the same in Firefox, Chrome and Opera. It renders fine when a XHTML doctype is used:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h开发者_C百科ttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
BTW: It does work in html5 too, but only when I set display:block for image. Is this really needed?
It's not the XHTML doctype as such that changes it, it's more like strict vs transitional.
Using a XHTML 1.0 transitional doctype puts the browser into limited-quirks mode, whereas the HTML5 style doctype selects standards mode. The vertical-align of images is different between the two modes.
You can see the same black line if you use <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">which also puts the browser into standards mode.
There are a number of ways to remove the black line. One is to set the img to display:block.
Another is to set the img to vertical-align:bottom.
The black bar is your background color showing. If you don't want to see the black, one option is to remove the background:#000 from your div's style attribute.
Also, why are you using height: 50px in your style attribute? If you're trying to resize the image itself, use the height attribute instead.
OPTION 2:
This code seems to also remove the black background form showing:
<!DOCTYPE html>
<html>
<body>
<div style="background:#000;">
<img src="http://images.google.com/intl/de_ALL/images/logos/images_logo_lg.gif" style="position:absolute; height: 50px;">
</div>
</body>
</html>
加载中,请稍侯......
精彩评论