Question

我认为firefox对CSS3中的盒子模型的支持太差了......

我遇到过很多涉及盒子的问题，这些问题在Chrome和Safari中运行良好..

这是最新的问题：

似乎FF不支持具有相对浮动的框..

这是示例，您可以在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;
}

当我删除

时

pisition: relative;
float:left;

在#test中，一切正常

但是使用'浮动'，盒子模型不起作用......

Answer 1

你没有使用“CSS3”。您正在使用无效CSS的组合（CSS中没有display: box的计划），CSS3 Flexbox的早期WebKit草案实现和XUL框（与CSS3 Flexbox完全无关以及WebKit实现的内容））。

XUL盒子不允许浮动;当你浮动它们时它们就变成了块，因为浮动更改会在CSS中显示值。

这是FireFox的错误吗？

1 个答案: