为什么 Chrome 和 Firefox 在保证金上的表现不同？ [复制]答案

【问题标题】：Why do Chrome and Firefox behave differently on margin? [duplicate]为什么 Chrome 和 Firefox 在保证金上的表现不同？ [复制]
【发布时间】：2015-07-03 10:20:20
【问题描述】：

我试图了解 Chrome 和 Firefox 之间的行为差异。我已经发布了following CodePen 来说明这一点。

在 Firefox 中，由于应用了 margin-top: -50px，页脚元素会粘在包装 div 的底部。这是我所期待的。

对于 Chrome（和 IE），p 元素的margin-bottom下推页脚，使其溢出。这是为什么呢？

html, body {
    margin: 0px;
    height: 100%
}
header {
    background-color: dodgerblue;
    opacity: 0.5;
}
#wrapper {
    background-color: tomato;
    position: relative;
    min-height: 100%;
}
 
#container p {
    background-color: lightgreen;
    width: 500px;
    /*margin-bottom: 0px;*/
}
footer {
    height: 50px;
    background-color: dodgerblue;
    margin-top: -50px;
    opacity: 0.5;
}

<body>
    <div id="wrapper">
        <header>.</header>
        <div id="container">
            <p>.</p>
        </div>
    </div>
    <footer></footer>
</body>

【问题讨论】：

min-height:100% 将成为您的问题，因为您的包装 div 不包含页脚元素。
您的其中一种颜色也有错字，dogerblue 而不是 dodgerblue。
@BrianDriscoll 但这并不能解释浏览器之间的差异； margin 的行为应该是明确定义的。
@MrLister 鉴于所提供的 CSS，我相信它在 Chrome 和 IE 中的行为符合预期。
好吧，我没有真正的答案（它可能与折叠边距有关，但我无法解释为什么 FF 和 Chrome 以不同的方式折叠边距），或者真正的解决方案 - OP 已经在代码中注释掉了 margin-bottom:0 - 但既然这样就行了，为什么不使用它呢？或者，更彻底的技巧是#container p:last-child {margin-bottom:0}，这样您的容器中就可以有多个段落。或许可以输入padding-bottom:1em 以取得好成绩。

标签： css

【解决方案1】：

原因

那是因为#wrapper 内部的p 元素有一些边距，可能会塌陷。

边距折叠简介

CSS 2.1 规范说

8.3.1 Collapsing margins

在 CSS 中，两个或多个框的相邻边距 [...] 可以组合形成一个单一的边距。据说以这种方式组合的边距折叠 [...]

相邻的垂直边距折叠 [...]

你的风格

你的#wrapper 元素有

#wrapper {
  height: auto;
  min-height: 100%;
}

旧行为 (Firefox)

一个old version of the spec说

流内块级元素的下边距，带有 'height' of 'auto' 和 'min-height' 小于元素的 used height 和 'max-height' 大于元素的 used 高度与其最后一个流入块级孩子的底部相邻如果元素没有底部填充或边框，则为边距。

#wrapper 有 height: auto。但是，如果窗口高于其内容，min-height 将是使用的高度（不小于）。因此，边距不会崩溃。

这是在 Firefox 上观察到的行为。

新行为（Chrome）

但是，规范changed，现在min-height 的值无关紧要：

改写了相邻边距的规则，以便“最小高度”和元素的“最大高度”对是否元素的下边距与其最后一个子元素的底部相邻边距。

新规则是

最后一个流入子节点的 [the] 下边距和如果父级具有“自动”计算高度，则其父级[相邻]

因此，由于height 是auto，边距应该折叠。

这是在 Chrome 上观察到的行为。

注意

这里当前的规范似乎暗示min-height: 0 是一个要求：

上面的规则意味着流入块框的底部边距 'height' 为“自动”，'min-height' 为零以其最后一个流入块级子级的底部边距折叠 [...]

但事实并非如此。 CSS 2.2 中的语句will be clarified。

插图

以下 sn-p 动画 min-height 来说明 Chrome 和 Firefox 之间的行为差异：

当min-height小于内容高度时，
- 使用的height是内容的一个
- Chrome 和 Firefox 上的边距均折叠
否则，
- 使用的height是min-height
- 边距在 Chrome 上折叠，但在 Firefox 上不折叠

因此，当min-height 达到内容的高度时，在 Firefox 上，由于边距折叠导致空间突然（消失）幻影。

#wrapper {
  background: orange;
  margin: 0 1em;
  -webkit-animation: animate 1s linear infinite alternate;
  animation: animate 1s linear infinite alternate;
}
footer {
  background: red;
}
p {
  margin: 1em 0;
  height: 1.75em;
  background: green;
}
@-webkit-keyframes animate {
  from { min-height: 4em; }
  to   { min-height: 6em; }
}
@keyframes animate {
  from { min-height: 4em; }
  to   { min-height: 6em; }
}
/* Content is 4.5em tall */

<div id="wrapper">
  <p>Line 1</p>
  <p>Line 2</p>
</div>
<footer>Footer</footer>

【讨论】：

【解决方案2】：

如果您在包装上放置 100% 的高度，它将修复它。我不是 100% 确定为什么 firefox 做对了，而其他人做错了。我研究了一个小时，因为它让我发疯，没有答案。话虽这么说，就 Chrome 而言，这是有道理的，因为基本上你说你希望包装器的最小高度为 100%......但它可以更多......所以当你添加页脚时，它更多...这将其推倒。

minheight: 100%;   -->   height: 100%;

但又一次，不知道为什么它在不同的浏览器中有所不同。

我确实注意到的一件事是，如果您在 Firefox 中删除 -50px 的边距顶部，它会立即放在包装器之后（没有空格），但如果您在 IE 和 Chrome 中执行相同操作，则会出现页脚顶部的填充排序......可能大约 10 px 左右（没有测量它）。这种“间隙”或“空间”不会在 Firefox 中发生，但在 chrome 和 IE 上会发生 ----> 这让我认为这个间距与其行为不同的原因有关，因为这个间距是相同的大小如页脚底部所示（通过包装器的部分）

【讨论】：

你是正确的用高度替换 min-height ，但这里真正的问题是，为什么包装元素在 chrome 和 ie 上超过 100%？您所指的包装器和页脚之间的间隙（当未应用 -margin-top 时）是段落的边距底部。这就像一个奇怪的边缘正在发生崩溃，但我不明白为什么。
@Mic75 就像我在评论中所说，与折叠边距有关。 div 与其内容中的最后一个 p 共享其底部边距。如果你给 p 一个下边距，比如说 40px，那么 div 下面的空间也将是 40px。
@MrLister 你是对的，marge 正在崩溃。确认你的观点的其他事情是，如果我在 div 上放置一个 1px 的填充底部或一个边框（它们都可以防止边缘折叠），那么它下面就没有更多的空间了。最后，看来FF的行为是错误的。