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

发布于 2024-12-18 02:41:22 字数 257 浏览 0 评论 0原文

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

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

浪推晚风 2024-12-25 02:41:22

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

请注意，-webkit-box（我认为这就是您所说的“在 Chrome 中工作”的意思）是完全不同的东西：它是非常早期的 CSS flexbox 草案之一的实现。它与 -moz-box 以及当前的 Flexbox 草案共享一些表面功能，但在其他方面完全不同。

现在真正的问题是......你到底想做什么？

回复收藏 0 原文

痴者 2024-12-25 02:41:22

我创建了一个最小的示例，并在 Firefox 7.0.1 和 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>

结果如下。希望这些信息对您有所帮助。在此处输入图像描述

I created a minimal example and tested it under 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>

Result is below. Hope this information helps you. enter image description here

回复收藏 0 原文