我有这个简单的例子:
<header>
<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li class="clear"></li>
</ul>
</header>
<section>section</section>
而这块css:
BODY, HTML{
margin: 0;
}
header{
margin-bottom: 100px; /* section goes down */
}
UL{
list-style-type: none;
}
UL LI{
float: left;
background: green;
}
.clear{
clear: both;
float: none;
}
section{
background: red;
}
所以我希望"标题"直接进入左上角,然后是100px边距,然后是"部分".在所有主流浏览器中按预期工作,但在Firefox(版本16)中,"标题"由于某种原因获得额外的保证金.
这是一个错误吗？
这里有一个jsfiddle示例:http://jsfiddle.net/AvZek/2/
BTW如果我使用clearfix而不是"clear"类而不是它正常工作.
我试图了解Chrome和Firefox之间的行为差异.我已经发布了以下CodePen来说明这一点.
使用Firefox时,页脚元素会粘贴到包装div的底部,这要归功于margin-top: -50px它的应用.这是我所期待的.
使用Chrome(和IE),margin-bottomp元素会向下推动页脚,使其溢出.这是为什么？
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>