CSS positioning inconsistencies in browsers
I was just playing around with CSS positioning and I have got a few doubts regarding the the elements being rendered in browsers? Would someone please explain to me why this is?
HTML CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<div style="background:#ccc;height:150px;width:300px;">开发者_高级运维
parent div
<div style="background:#ff0;height:50px;position:absolute;">
child div
</div>
</div>
</body>
</html>
1.Why is the child div being displayed in-line with the content of the parent div in IE6 but not in Safari?
2.And when I positioned the child div absolute,it lost its width? But if I specify width:inherit it gets its full width back in Safari but not in IE6[i know inherit is not supported in IE].
Thank You
Absolutely-positioned block-level elements are supposed to live in their own formatting context. Furthermore, since
divis a block-level element, the child is supposed to go on a new line instead of inlining with the parent's content. And of course, one can't expect IE6 to know all this.Absolutely-positioned block-level elements do not expand to fit their container if you do not give them a width.
加载中,请稍侯......
精彩评论