當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時的神祕邊際

回答

相關問題