Mysterious margin when child div is using css flexbox
I've been experimenting with CSS Flexbox to make boundary columns on my webpage. Using -moz-box, -moz-box-flex, and -moz-box-orient (and equivalent -webkit attributes).
Everything works fine until I inserted the HTML5 doctype header. As soon as I did that, the outer div grows in height by 16px and the inner child div (which contains the box styles) gets pushed down. This leaves a mysterious "margin" at the top of the child div.
Firebug gives no clue. It still shows the inner and outer divs as the same width and height (600x600) and shows 0 for all margin/padding values between the two divs. But its rendering the outer div at 600x616 and placing the child at 16px below the top.
I've included a simple example below. The outer div is fixed at 600x600. The inner div is set to consume all the space of its parent and is then subdivided into child boxes.
If you run this HTML in Firefox, you'll see a "pink" margin at the top of the square. (Pink is the background color of the outer div). If you remove the DOCTYPE header, then it renders just fine.
I've reproduced this issue on both FF 3.16 and the FF4 Beta. No problems in Chrome.
What's going on here? What "quirk" is getting accounted for by the addition of the DOCTYPE header?
<!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>
Whoa - weird...
Not sure why this is happening but I know a way around it... Change your html to this:
<div class="leftpane">.</div>
<div class="rightpane"></div>
When there is content in either of those div's the layour renders correctly. Check it out here . It may well be a bug in the way FF handles HTML5 documents - might be best to raise it with them
加载中,请稍侯......
精彩评论