Mysteriöse Rand, wenn Kind div verwendet Css Flexbox

Ich habe experimentiert mit CSS Flexbox, um Grenzspalten auf meiner Webseite zu machen. Verwenden von -moz-box, -moz-box-flex und -moz-box-orient (und entsprechende -webkit-Attribute).Mysteriöse Rand, wenn Kind div verwendet Css Flexbox

Alles funktioniert gut, bis ich den HTML5 Doctype-Header eingefügt habe. Sobald ich das gemacht habe, wächst das äußere div um 16px und das innere child div (welches die Boxstile enthält) wird nach unten geschoben. Dies hinterlässt einen mysteriösen "Rand" an der Spitze des Kind-Div.

Firebug gibt keine Ahnung. Es zeigt immer noch die innere und äußere divs als die gleiche Breite und Höhe (600x600) und zeigt 0 für alle margin/padding Werte zwischen den zwei Divs. Aber es rendert das äußere div bei 600x616 und setzt das Kind auf 16px unter die Spitze.

Ich habe ein einfaches Beispiel unten eingefügt. Das äußere Div ist auf 600x600 fixiert. Das innere div ist so eingestellt, dass es den gesamten Platz seines Elternteils verbraucht und dann in untergeordnete Felder unterteilt wird.

Wenn Sie diesen HTML-Code in Firefox ausführen, sehen Sie am oberen Rand des Quadrats einen "rosa" Rand. (Pink ist die Hintergrundfarbe des äußeren Teils). Wenn Sie den DOCTYPE-Header entfernen, wird es problemlos gerendert.

Ich habe dieses Problem sowohl auf FF 3.16 als auch auf FF4 Beta reproduziert. Keine Probleme in Chrome.

Was geht hier vor? Welche "Eigenart" wird durch das Hinzufügen des DOCTYPE-Headers berücksichtigt?

<!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>

Quelle

2010-12-19 selbie

Whoa - seltsam ...

Nicht sicher, warum dies geschieht, aber ich kenne einen Weg darum herum ... dazu ändern html:

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

Wenn es Inhalt in einem dieser divs das layour rendert richtig. Überprüfen Sie es here. Es kann ein Fehler in der Art und Weise sein, wie FF HTML5-Dokumente handhabt - am besten, um es mit ihnen zu erhöhen

Quelle

2010-12-19 20:37:47 lnrbob

Ich mehr oder weniger herausgefunden, die gleiche Sache. Durch das Einfügen eines schussfreien Speicherplatzes ( ) wird das Problem behoben und der Bug # 620205 mit FF archiviert. – selbie

Mysteriöse Rand, wenn Kind div verwendet Css Flexbox

Antwort

Verwandte Themen