CSS positioning inconsistencies in browsers_问答_开发者

CSS positioning inconsistencies in browsers

开发者 https://www.devze.com 2023-02-20 00:49 出处：网络

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?

相关专题：css

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?

CSS positioning inconsistencies in browsers

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 div is 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.