子div使用css flexbox时的神秘边距答案

【问题标题】：Mysterious margin when child div is using css flexbox子div使用css flexbox时的神秘边距
【发布时间】：2011-05-27 18:33:15
【问题描述】：

我一直在尝试使用CSS Flexbox 在我的网页上制作边界列。使用 -moz-box、-moz-box-flex 和 -moz-box-orient（以及等效的 -webkit 属性）。

在我插入 HTML5 doctype 标头之前一切正常。一旦我这样做了，外部 div 的高度增加了 16px，内部子 div（包含框样式）被推下。这会在子 div 的顶部留下一个神秘的“边距”。

Firebug 没有给出任何线索。它仍然将内部和外部 div 显示为相同的宽度和高度 (600x600)，并为两个 div 之间的所有边距/填充值显示 0。但是它将外部 div 渲染为 600x616 并将子元素放置在顶部下方 16px 处。

我在下面提供了一个简单的示例。外部 div 固定为 600x600。内部 div 设置为消耗其父级的所有空间，然后细分为子框。

如果您在 Firefox 中运行此 HTML，您会在正方形顶部看到“粉红色”边距。（粉红色是外部 div 的背景颜色）。如果您删除 DOCTYPE 标头，则它会呈现得很好。

我已经在 FF 3.16 和 FF4 Beta 上重现了这个问题。在 Chrome 中没有问题。

这里发生了什么？添加 DOCTYPE 标头解决了什么“怪癖”？

<!DOCTYPE HTML>
<!-- If you remove the DOCTYPE header above,then everything is ok-->
<!-- If you keep the DOCTYPE header above, then "main" gets genenerated at 600x600, but "outer" is generated at about 600x616 -->

<html>
<head>
    <title>Flexbox test</title>
    <style type="text/css">

        .outer
        {
            width: 600px;
            height: 600px;
            background-color: #ff00ff;
        }

        .main
        {
            width: 100%;
            height: 100%;
            background-color: #777777;
            display: -moz-box;
            display: -webkit-box;
            -moz-box-orient: horizontal;
            -webkit-box-orient: horizontal;
        }

        .leftpane
        {
            width: 100px;
            background-color: Navy;
        }

        .rightpane
        {
            -moz-box-flex: 1;
            -webkit-box-flex: 1;
            background-color: Olive;
        }


    </style>
</head>

<body>
        <div class="outer">
            <div class="main">
                <div class="leftpane"></div>
                <div class="rightpane"></div>
            </div>
        </div>
</body>
</html>

【问题讨论】：

标签： html css

【解决方案1】：

哇 - 奇怪...

不知道为什么会这样，但我知道一种解决方法...... 将您的 html 更改为：

<div class="leftpane">.</div>
<div class="rightpane"></div>

当其中任何一个 div 中有内容时，布局会正确呈现。看看here。这很可能是 FF 处理 HTML5 文档的方式中的一个错误 - 最好与他们一起提出它

【讨论】：

我或多或少地想出了同样的事情。插入不间断空格 ( ) 也解决了这个问题，我用 FF 提交了 bug # 620205。