为什么Safari 4/mac无法在此嵌套的div中渲染顶部和底部边距? | mac无法在此嵌套的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中渲染顶部和底部边距?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！