我一直在试验 CSS Flexbox在我的网页上制作边界栏。使用 -moz-box、-moz-box-flex 和 -moz-box-orient(以及等效的 -webkit 属性)。
一切正常，直到我插入 HTML5 文档类型 header 。一旦我这样做，外部 div 的高度就会增加 16px，而内部子 div(包含框样式)会被向下推。这会在子 div 的顶部留下一个神秘的“边距”。
Firebug 没有提供任何线索。它仍然将内部和外部 div 显示为相同的宽度和高度 (600x600)，并为两个 div 之间的所有边距/填充值显示 0。但是它将外部 div 渲染为 600x616，并将子元素放置在顶部下方 16px 处。
我在下面包含了一个简单的示例。外部 div 固定为 600x600。内部 div 设置为占用其父级的所有空间，然后再分割为子框。
如果您在 Firefox 中运行此 HTML，您会在正方形顶部看到一个“粉红色”边距。 (粉红色是外层 div 的背景色)。如果您删除 DOCTYPE header ，那么它会呈现得很好。
我已经在 FF 3.16 和 FF4 Beta 上重现了这个问题。在 Chrome 中没有问题。
这是怎么回事？添加 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>
最佳答案
哇——奇怪...
不确定为什么会这样，但我知道解决方法... 将您的 html 更改为:
<div class="leftpane">.</div>
<div class="rightpane"></div>
当其中任何一个 div 中有内容时，布局就会正确呈现。看看here .这很可能是 FF 处理 HTML5 文档的方式中的错误 - 最好与他们一起提出它
关于html - 子 div 使用 css flexbox 时的神秘边距，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/4481723/