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;}
        .col{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

回答1:

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: hidden to .row as an alternate way to clear the float.

You can then remove the <div class="clear"></div> because it's no longer required.

回答2:

Looks fine here:

JSFiddle

You will be wanting padding-bottom:30px; instead of margin-bottom:30px;

回答3:

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

回答4:

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>

回答5:

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;
}

回答6:

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.

回答7:

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.

来源：https://stackoverflow.com/questions/5272091/firefox-interprets-margin-bottom-wrong-maybe-a-bug

标签

css

firefox

margin