Question

I think firefox’s support to box model in CSS3 is soooooooooooooo poor…

I have encountered many problems involving box which works fine in Chrome and Safari..

Here is the latest problem:

it seems that FF does not support box with relative float..

here is the example, you can try it in jsFiddle:

HTML:

<div id="container">
    <div id="test">
        <div id="b1" class='item'></div>
        <div id="b2" class='item'></div>
    </div>
</div>

CSS:

#container{
    width: 500px;
    height: 500px;
    background-color: red;
}

#test {
    pisition: relative;
    float:left;

    width: 200px;
    height: 200px;
    background-color: green;
    display: -webkit-box;
    display: -moz-box;
    display: box;

    -moz-box-orient: $align;
    -moz-box-pack: center;
    -moz-box-align: center;

    -webkit-box-orient: $align;
    -webkit-box-pack: center;
    -webkit-box-align: center;

    box-orient: $align;
    box-pack: center;
    box-align: center;
}

.item {
    width: 50px;
    height: 50px;
}

#b1 {
    background-color: yellow;
}

#b2 {
    background-color: blue;
}

when I remove the

pisition: relative;
float:left;

in the #test, everything is OK

but with ‘float’, the box model doesn’t work…

Answer 1

You’re not using “CSS3”. You’re using a combination of invalid CSS (there is no plan for a display: box in CSS), an early WebKit draft implementation of CSS3 Flexbox, and XUL boxes (which are completely unrelated to CSS3 Flexbox and to what WebKit implements).

XUL boxes are not allowed to be floated; when you float them they become blocks, because floating changes display values in CSS.