Question

我试图了解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>

Answer 1

<强>原因

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

保证金崩溃简介

CSS 2.1规范说

8.3.1 Collapsing margins

在CSS中，两个或多个框的相邻边距可以合并   形成单一保证金。据说以这种方式结合的边际   崩溃 [...]

相邻的垂直边距崩溃[...]

您的风格

您的#wrapper元素

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

旧行为（Firefox）

old version of the spec说

带有a的流入块级元素的下边距 'height'＆＃39; auto＆＃39;并且'min-height'小于元素使用的高度和'max-height'大于使用的元素高度与其最后一个流动的块级孩子的底部相邻如果元素没有底部填充或边框，则为margin。

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

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

新行为（Chrome）

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

重新规定相邻边距的规则，以便达到最小高度＆＃39;和＆＃39;最大高度＆＃39;一个元素对是否有影响元素的底部边缘与其最后一个孩子的底部相邻裕度。

新规则是

[最后一个流动儿童的底部边缘和[底部边缘] 如果父母有“自动”，则其父母[正在毗邻]计算高度

因此，由于height为auto，因此边距应该会崩溃。

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

注意

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

以上规则意味着流入块框的下边距使用'height'＆＃39;自动＆＃39;和'min-height'为零崩溃与其最后一个流动的块级孩子的底部边缘 [...]

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

<强>插图

以下代码段动画min-height以说明Chrome和Firefox之间的行为差异：

当min-height小于内容的高度时，

使用过的height是内容

边距在Chrome和Firefox上崩溃

否则，

使用过的height是min-height

Chrome上的边距会崩溃但Firefox上没有

因此，当min-height达到内容的高度时，在Firefox上会出现因边距崩溃而导致的空间突然显示（
）。

＆＃13;
＆＃13;
#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 */
＆＃13;
<div id="wrapper"> <p>Line 1</p> <p>Line 2</p> </div> <footer>Footer</footer>
＆＃13;
＆＃13;
＆＃13;

Answer 2

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

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

但是再一次，不确定为什么它在不同的浏览器中有所不同。

我注意到的一件事是，如果你删除-50px的margin-top，在firefox中，它会在包装器之后（没有空格）放置，但是如果你在IE和Chrome中执行相同操作，那么在页脚顶部填充...可能大约10 px左右（没有测量它）。这个“差距”或“空间”不会在firefox中发生，但会在chrome和IE上发生----＆gt;这让我觉得这个间距与其表现不同的原因有关，因为这个间距与页脚底部（通过包装的部分）显示的大小相同

为什么Chrome和Firefox在保证金方面表现不同？

2 个答案: