保证金：如果在Firefox中显示为框，则自动无效

Question

在Firefox（版本8.0）中，如果我将元素指定为display: -moz-box和margin: auto，则该元素不再位于其父元素的中心。它适用于Chrome。这是Firefox的问题，还是我遗漏了什么？我该如何解决这个问题？

一种解决方法是添加包装器div元素并将其display设置为block，但这很难看。

Answer 1

-moz-box是Firefox中XUL框的显示类型。它们不遵循普通的CSS盒模型，因此在使用自动边距时不要自动居中。所以这里的行为在Firefox中是正确的：这只是XUL盒子的行为。

请注意-webkit-box（我假设你的意思是“在Chrome中运行”）是完全不同的事情：它是早期CSS flexbox草稿之一的实现。它与-moz-box共享一些表面特征，就当前的flexbox草稿而言，它是完全不同的。

现在真正的问题是......你究竟想做什么？

Answer 2

我创建了一个最小的示例并在Firefox 7.0.1 unde ubuntu上进行了测试：

<div style="border:1px solid blue;width:200px;height:200px;float:left">
<div style="display:block; margin:auto;width:100px;height:50px;">display: block</div>
</div>

<div style="border:1px solid blue;width:200px;height:200px;float:left">
<div style="display:-moz-box; margin:auto;width:100px;height:50px;">display: -moz-box</div>
</div>

结果如下。希望这些信息可以帮助您。

Answer 3

According to the official W3C spec margin: auto;应以与影响flex元素相同的方式影响block个元素。 Firefox的实现是一个早期的实现，目前不符合规范。我被告知，一个新的实施将落在第18版。