差异（Firefox与Chrome）在绝对定位元素的高度，浮动，clearfix，负边距内

Question

我遇到了一个问题，即渲染一个绝对定位的元素，包含负边距内的另一个元素，然后是另一个带有clearfix的元素，最后是一些浮动元素。

测试用例：http://jsfiddle.net/u5Qat/

HTML：

<div class="absolute">
    <div class="content">
        Test
        <footer><p class="clearfix"><span>Footer</span></p></footer>
    </div>
</div>

CSS：

* {
    box-sizing: border-box;
}

*:before, *:after {
    box-sizing: border-box;
}

.clearfix:before,
.clearfix:after {
  content: " ";
  display: table;
}
.clearfix:after {
  clear: both;
}

.absolute {
    position: absolute;
    left: 0;
    top: 0;
    border: 1px solid red;
}

.content {
    padding: 0 50px;
}

footer p {
    margin-top: 25px;
    margin-bottom: -10px;
}

footer p span {
    float: left;
}

我认为Chrome正确渲染（55px高度），Firefox错误地扩展了绝对定位元素，因此它覆盖了具有负边距（65px高度）的元素。

截图：

看起来像clearfix＆amp;漂浮在这种情况下做不好？

修改 IMO正确的行为是Chrome（右侧），Firefox是错误的。

Answer 1

footer p {
margin-top: 25px;
margin-bottom: -10px;
}

将以上代码替换为以下代码

footer p {
margin-top: 25px;
margin-bottom: 0px;
}

如果您想在各种浏览器中更改内容的高度，请使用以下关键字

footer p {
   -moz-margin-bottom:    0px;   /* Firefox 1, probably can drop this */
   -webkit-margin-bottom: 0px;   /* Safari 3-4, also probably droppable */
   margin-bottom:        0px;   /* Everything else */
}