What might cause this CSS margin sharing(?) bug in Firefox to occur?
I ran into this unusual Firefox-only (as far as I know - I only checked against Safari and Chrome, and was using Firefox 3.6) CSS bug today at work, and managed to reproduce the problem with a much smaller snippet of code, here:
<!DOCTYPE html>
<head>
<style>
/*
* A small snippet of some CSS resets code from html5doctor and YUI fonts and resets
* added just to make sure it's not from weird browser padding/margin. Still happens
* if this is removed though
*/
html, body, div, span, p, ul, li {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
background: transparent;
}
body {
line-height: 1;
}
li {
list-style: none;
}
body {
color: #333;
font-family: Helvetica, Arial, Verdana, Geneva, sans-serif;
line-height: 1.3;
}
/* Some clearfix code from HTML5 Boilerplate */
.clearfix:before, .clearfix:after {
content: "\0020";
display: block;
height: 0;
visibility: hidden;
}
.clearfix:after {
clear: both;
}
.clearfix {
zoom: 1;
}
</style>
</head>
<body>
<div style="padding: 20px; border: solid thin black;">Hello!</div>
<div>
开发者_运维问答 <ul class="clearfix">
<li style="float: left; padding: 5px; border: solid thin black;">There</li>
<li style="float: left; padding: 5px; border: solid thin black;">should</li>
<li style="float: left; padding: 5px; border: solid thin black;">be no</li>
<li style="float: left; padding: 5px; border: solid thin black;">margin</li>
<li style="float: left; padding: 5px; border: solid thin black;">above</li>
<li style="float: left; padding: 5px; border: solid thin black;">this</li>
<li style="float: left; padding: 5px; border: solid thin black;">list</li>
</ul>
<p style="margin-top: 30px">Yet for some reason the 30px margin-top on this p applies to both this p as well as the above list</p>
</div>
</body>
</html>
Here's a screenshot of what the problem looks like
So what I'd normally expect to happen here is that there's no margin between the two <div>s, or above the <ul>, and indeed, hovering over elements in Firebug will show no margin/padding coloring. But for some reason, the 30px margin-top from the <p> is being applied to both the <p>, as well as its containing <div>. My guess is that something's buggy with the clearfix (and indeed, if you use a clearing <br/>, this problem goes away), but I'm curious if anyone has insight into what exactly the problem here is. Thanks!
That's correct, you are not using the right clearfix ;-)
This one should fix the issue:
.clearfix:before,
.clearfix:after {
content: ".";
display: block;
height: 0;
overflow: hidden;
}
.clearfix:after {clear: both;}
.clearfix {zoom: 1;}
See: http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified/
BUT - the elephant in the room that isn't being mentioned is a Firefox float bug which affects at least 3.6-6 (tested). A float container styled with ':after { content:"" }' (where content is empty or any type or whitespace) will duplicate the margin-top of the following element! This only appears to affect Firefox and is clearly a bug.
Simple test case:
<div class="container cf">
<div class="floater"></div>
</div>
<div class="next">
<p>Some content here!</p>
</div>
<style>
body { padding: 0; margin: 0; }
.cf:after { content:""; display:block; clear:both; *zoom:1; }
.container { background:gray; }
.floater { float:left; width:46%; height:200px; margin:0 10px; background:#ddd; }
.next { background: yellow; margin: 30px 0px; }
</style>
http://jsfiddle.net/TjW6c/394/
You're not using the clearfix right. Using positioniseverything's clearfix(a.k.a. pie-clearfix) is usually my solution to all clearfixes:
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
You can check it out here: http://jsfiddle.net/WVtYd/
加载中,请稍侯......
精彩评论