Question

Safari 4似乎忽略了元素边距，除非我添加边框。

以下示例呈现左右边距但没有顶部或底部。

添加边框后，会按预期渲染。我做错了什么，或者我是否必须为每个带边距的元素添加边框(albeit transparent ones)？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>testing</title>
<style>
    body {background-color:#666;}
    div {display:block; position:relative; margin:0; padding:0;}
    .background {background-color:#990000;}
    .foreground {background-color:#fff; margin:10px; padding:10px;}
</style>
</head>
<body>
    <div class='background'>
        <div class='foreground'>
        foreground
        </div>
    </div>
</body>
</html>

Answer 1

这是一种正常的奇怪行为，称为边缘（编辑，对不起，我是法国人）崩溃。要简单地避免它在容器上添加overflow:auto;。

.background {background-color:#990000; overflow:auto;}

Answer 2

这被称为保证金崩溃。当顶部和底部边距相互接触时，边距将合并为两者中的较大者。

添加边框时“正确”工作的原因是因为您为边距创建了1px分隔符，因此它们不再折叠。有趣的是，如果你改为添加一个没有高度/边框的空div，边距仍然会崩溃，因为div占用0px空间。

为什么Safari 4 / mac不能在这个嵌套的div中渲染顶部和底部边距？

2 个答案: