带有浮动、clearfix、负边距的绝对定位元素的高度差异（Firefox 与 Chrome）

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 和 float 似乎效果不佳？

编辑： 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 */
}