当div div使用css flexbox时的神秘边际

我一直在试验CSS Flexbox来在我的网页上制作边界栏。使用-moz-box，-moz-box-flex和-moz-box-orient（和等效的-webkit属性）。当div div使用css flexbox时的神秘边际

一切正常，直到我插入HTML5文档类型标头。只要我这样做，外部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>

来源

2010-12-19 selbie

哇 - 怪异......

不知道为什么发生这种情况，但我知道它周围的路... 你的HTML改成这样：

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

当有这些div的内容都可以正确渲染。看看here。这可能是FF处理HTML5文档的方式中的一个错误 - 可能最好提高它与他们

来源

2010-12-19 20:37:47 lnrbob

我或多或少想出了同样的事情。插入一个非破坏性空间（）修复了这个问题，并且我用FF提交了错误＃620205。 – selbie 2010-12-20 06:02:08

当div div使用css flexbox时的神秘边际

回答

相关问题