Question

我刚刚玩CSS定位，我对浏览器中呈现的元素有些怀疑？有人请向我解释为什么会这样吗？ enter image description here

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.为什么子div与IE6中父div的内容一致，但在Safari中不显示？

2.当我将儿童div定位为绝对时，它会失去宽度？但是，如果我指定宽度：继承它在Safari中获得其全宽，但在IE6中没有[我知道IE中不支持继承]。

谢谢

Answer 1

绝对定位的块级元素应该存在于自己的格式化上下文中。此外，由于div是块级元素，因此孩子应该使用新的行而不是使用父级的内容进行内联。当然，人们不能指望IE6知道这一切。
如果不给它们宽度，绝对定位的块级元素不会展开以适合它们的容器。

CSS在浏览器中定位不一致

1 个答案: