通过 CSS 处理 DIV 中的 WIDTH 和 HEIGHT 百分比问题（firefox 不起作用）答案

【问题标题】：Issues with WIDTH and HEIGHT percentages in a DIV via CSS (firefox doesn't work)通过 CSS 处理 DIV 中的 WIDTH 和 HEIGHT 百分比问题（firefox 不起作用）
【发布时间】：2012-04-23 02:44:49
【问题描述】：

我脑子里都在想这个问题，所以让我分享一下我的挫败感，以便寻找有相同经历的人，幸运的是，找到了解决方案。

事情是这样的：

http://jsfiddle.net/w4d2E/

在 chrome 中，百分比可以正常工作，但在 Firefox（最新版本）中尝试相同时，内容 div 不再水平和垂直扩展。

我已经分析了这里的所有类似问题，但我找不到任何有效的答案。

提前致谢

P.S.：我尝试在“内容”层中使用块显示而不是“框”，但仍然具有相同的行为。

【问题讨论】：

标签： firefox css height width centering

【解决方案1】：

您正在使用 XUL 框布局。我建议不要这样做。 -moz-box 不是 CSS flexbox 布局，正如您所想的那样。

【讨论】：

【解决方案2】：

这里的问题是display: -moz-box 用于正文。如果你删除它一切正常。这似乎是一个错误，所以我建议在bug tracker 中提交报告。

【讨论】：

如果你删除 -moz-box 那么 Firebox 使用传统的块显示并且 FlexBox 布局被关闭。我需要的是能够使用 FlexBox，因为我正在尝试做一些垂直居中。顺便说一句，Chrome 使用这些东西就像一个魅力 :) 感谢您试一试
这就是为什么我说这是一个错误。这很好地总结了“为什么它不起作用？”这个问题的答案。带有供应商前缀的功能往往具有它们——毕竟它们是实验性的。