2
私はCSS Flexboxを試して、自分のウェブページに境界列を作っています。 -moz-box、-moz-box-flex、-moz-box-orient（および同等の-webkit属性）を使用します。子divがCSSを使用しているときの不思議なマージンフレックスボックス
HTML5のdoctypeヘッダーを挿入するまで、すべて正常に動作します。私がそれをやろうとすると、外側のdivは16pxだけ高くなり、内側のchild div（ボックススタイルを含む）は押し下げられます。これは、子divの上部に不思議な "余白"を残します。
Firebugはヒントを与えません。内側と外側のdivは同じ幅と高さ（600x600）で表示され、2つのdiv間のすべてのマージン/パディング値に対して0が表示されます。しかし、それは600x616で外側のdivをレンダリングし、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>
私は多かれ少なかれ同じことを理解しました。改行しないスペース（ ）を挿入すると、この問題も解決され、バグ＃620205がFFに書き出されました。 – selbie