为什么Safari 4/mac无法在此嵌套的div中渲染顶部和底部边距? [英] Why is Safari 4 / mac not rendering top and bottom margins in this nested div?
本文介绍了为什么Safari 4/mac无法在此嵌套的div中渲染顶部和底部边距?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
除非添加边框，否则Safari 4似乎会忽略元素边距.
Safari 4 seems to be ignoring element margins unless I add a border.
以下示例呈现左右边界，但不显示顶部或底部.
The following example renders left and right margins but no top or bottom.
添加边框后，它将按预期渲染.我是在做错事还是要为每个元素的边框添加边框(albeit transparent ones)，仅用于Safari?
Upon adding a border, it renders as expected. Am I doing something wrong or am I going to have to add borders (albeit transparent ones) to every element with margins just for 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>
推荐答案
这是正常的怪异行为，称保证金(已编辑，抱歉，我是法国人)崩溃.
为了避免这种情况，请在容器上添加overflow:auto;.
It's a normal weird behaviour calling margin (edited, sorry i'm french) collapse.
To simply avoid it add overflow:auto; on the container.
.background {background-color:#990000; overflow:auto;}
这篇关于为什么Safari 4/mac无法在此嵌套的div中渲染顶部和底部边距?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
