Firefox interprets margin-bottom wrong. Maybe a Bug?
here a minimum version to reproduce the failure:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>title</title>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
<style type="text/css">
.clear{clear:both;}
.co开发者_如何学Gol{float:left;}
.row{margin-bottom:30px;background-color:red;}
</style>
</head>
<body>
<div class="row">
<div class="col">Lorem Ipsum</div>
<div class="clear"></div>
</div>
</body>
</html>
It is a Bug of Firefox or I misunderstand something. Edit: Forgot to explain the Problem. When im using margin-bottom for the .row in combination with a float in .col Then the element will be dropped down for the same value as the .row margin-bottom has
I'm not entirely sure why Firefox is behaving differently to other browsers here. It is something to do with collapsing margins.
However, you can easily fix it (no moving down in Firefox, consistency between browsers) by:
- Adding
overflow: hiddento.rowas an alternate way to clear the float.
You can then remove the <div class="clear"></div> because it's no longer required.
Looks fine here:
JSFiddle
You will be wanting padding-bottom:30px; instead of margin-bottom:30px;
i think you are assuming that it should pad the red row 30px on the bottom? You want padding-bottom then. The margin-bottom will put a 30px gap between the .row and the next element underneath it.
check this fiddle for what I mean
there is no failure make another div with class="row" underneath and you will see the margin-bottom:
<div class="row">
<div class="col">Lorem Ipsum</div>
<div class="clear"></div>
</div>
<!-- here is 30px space -->
<div class="row">
<div class="col">Lorem Ipsum</div>
<div class="clear"></div>
</div>
i think, the problem for him is, when you use firebug and make margin-bottom greater...then the body will go down.
If you use height then the body will not go down. Tested in FF 3.6.15
Or use padding with the margin...then the body do not move down.
Add to my comments here:
.row {
background-color: red;
margin-bottom: 30px;
padding-bottom: 1px;
}
The issue is related to floated elements being removed from the normal flow and you're expecting that element to act the same. Firefox is acting as it should. Sorry I don't have time to work this out.
thirtydot, you are right - this is because of collapsing margins. I was in a similar situation. However, you can't say that it's a bug of only FireFox. In fact, in Chrome, my margins didn't used to collapse even without the float being broken. In FireFox, on the other hand, the margins collapsed for me despite broken float (whether with overflow: hidden/auto, a cleared element between, or whatever). Funnily enough, the margins where collapsing between a child and a parent, which is not supposed to happen according to W3C specs. Moreover, a positive padding fixed this issue.
As a conclusion, I can say that no browser is 100% W3C/IEEE/ISO standards-compliant. However, I don't really care which browser complies to which exact standard. What matters is that they all comply to the same standard. This is not happening, and I doubt it ever will.
加载中,请稍侯......
精彩评论