Css 为什么Safari 4/mac不能在这个嵌套的div中呈现上下页边距？_Css_Safari_Margin

Css 为什么Safari 4/mac不能在这个嵌套的div中呈现上下页边距？

css safari

Css 为什么Safari 4/mac不能在这个嵌套的div中呈现上下页边距？,css,safari,margin,Css,Safari,Margin,Safari4似乎忽略了元素边距，除非我添加了边框下面的示例渲染左侧和右侧边距，但不渲染顶部或底部添加边框后，将按预期进行渲染。我是做错了什么，还是为了Safari，我必须给每个元素添加边框（尽管是透明的） <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w

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

下面的示例渲染左侧和右侧边距，但不渲染顶部或底部

添加边框后，将按预期进行渲染。我是做错了什么，还是为了Safari，我必须给每个元素添加边框

（尽管是透明的）

<!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>


测试
正文{背景色：#666；}
div{显示：块；位置：相对；边距：0；填充：0；}
.background{背景色：#990000；}
.前景{背景色：#fff；边距：10px；填充：10px；}
前景

这是一种正常的奇怪行为，称保证金（已编辑，对不起，我是法国人）崩溃。为了简单地避免它，添加

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

这就是所谓的边际崩溃。当顶部和底部边距相互接触时，边距将合并为两者中较大的边距
添加边框时，它工作“正确”的原因是为边距创建了1px分隔符，这样边距就不会再折叠。有趣的是，如果您添加了一个没有高度/边框的空div，则边距仍会塌陷，因为div占用0px的空间。
是的，边距正在塌陷，这是正常的。可能有助于解释。谢谢。有趣的文章-它可能是正确的，但这并不意味着它是正确的！所有其他浏览器似乎都理解边距的含义，并在相邻的边距元素的情况下处理合并边距的问题。@Moob这真的能像您在所有其他浏览器中所期望的那样工作吗？我不希望它。。。Firefox似乎用你为我编写的示例代码来压缩上/下页边距（）。通常情况下，它只是IE被破坏了，尽管我同意你的观点，非崩溃行为有时看起来更明智。是的，你是对的。。。在FF中也是一样的。令人震惊的是，我以前从未遇到过这个问题！谢谢。好的，但在这个例子中，合并的余量是0+10px=10px。不过谢谢你提供的信息。请注意，display:block在divs上是多余的，因为这是默认显示。我也不会将默认值设置为position:relative在divs上，我记得在过去有过这样的问题（尽管不记得确切的原因），只有在必要时才使用它。此外，我认为div的默认填充/边距实际上是0，因此您可能可以省略整个div css声明，而不会产生不良影响。@brad是的，谢谢，但我想在这个示例中确定它。另外，当您想要相对定位它时，定义position:relative也很有用（通常是这样）