css - 为什么 Safari 4/mac 不呈现此嵌套 div 中的顶部和底部边距?

标签 css safari margin

Safari 4 似乎会忽略元素边距,除非我添加边框。

以下示例呈现左右边距但没有顶部或底部。

添加边框后,它会按预期呈现。我是不是做错了什么,或者我是否必须为每个带有边距的元素添加边框 (尽管是透明的) 仅适用于 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>

最佳答案

这是一种正常的奇怪行为,调用 margin (编辑,对不起,我是法国人)崩溃。 为了简单地避免它,请在容器上添加 overflow:auto;

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

关于css - 为什么 Safari 4/mac 不呈现此嵌套 div 中的顶部和底部边距?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3925111/

相关文章:

javascript - 如何重定向到 Safari 中的 ios 设置在 ios9 中使用 javascript

css - 为什么我的右边距与 IE 中的左边距重叠?

html - 无法使Footer的文本对齐或margin:auto居中。小文字也不起作用

html - CSS First Child Select,省略特殊类

html - 如何使相对div内的div高度为100%?

CSS - 带有排版基线网格的 ems 字体大小

jquery - 调整我的网页以适应不同的分辨率和移动设备

html - 单选标签在 Safari 中不起作用

javascript - React/Next.js 站点无法在 Safari 中正确加载(空白页)

html - 制作坟墓形状。我该怎么做?