我遇到了一个问题,即渲染一个绝对定位的元素,包含负边距内的另一个元素,然后是另一个带有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是错误的。
答案 0 :(得分:0)
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 */
}