Why is Safari 4 / mac not rendering top and bottom margins in this nested div?
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.
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>
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;}
It is called margin collapse. When a top and bottom margin are touching each other, the margins will combine into the greater of the two.
The reason it works "correctly" when you add the border is because you created a 1px separator for the margins so they no longer collapse. Interestingly, if you instead added a empty div with no height/borders, the margins would still collapse because the div takes up 0px space.
加载中,请稍侯......
精彩评论