css - 边距：如果在 Firefox 中显示为框，则自动不起作用

Question

在 Firefox（8.0 版）中，如果我将元素指定为display: -moz-boxand 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

根据官方 W3C 规范 margin: auto;，应该以与影响flex元素相同的方式影响block元素。Firefox 的实现是目前不符合规范的早期实现。我被告知新的实现将在版本 18 左右登陆。