可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

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>

回答1:

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;}

回答2:

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.