1

似乎在 Firefox 中，如果我有A固定宽度/高度的 div 并且它有一个B宽度和高度设置为 100% 的子 div，那么如果或任何其他祖先B的计算宽度将为 0（因此不显示）Aof Bhas display: box（或适当的供应商前缀版本）设置。

示例 HTML：

<div id="a">
  <div id="b"></div>
</div>

示例 CSS：

#a {
    width: 300px;
    height: 200px;
    background-color: green;
    display: -webkit-box;
    display: -moz-box;
}
#b {
    width: 100%;
    height: 100%;
    background-color: red;
}

在 Firefox 中，将显示一个绿色框，但在 Chrome 中，将显示一个红色框。

这是查看此示例的小提琴。这是另一个嵌套 div 层的另一个小提琴，它表明即使它不是有问题的元素的直接父级，也会发生这种情况display: box。

我希望width: 100%B 上的声明强制它与父级的大小相同（即 Chrome 中的行为）。为什么宽度计算为0？

4

2 回答 2

0

高度不计算为零：它是宽度。尝试将一些内容放入 B（例如&nbsp;&nbsp;）。

display:box有想要的效果。使用-moz-box改变盒子模型。你显然不想要 CSS3 盒子模型，所以你不应该使用-moz-box.

于 2012-03-21T23:50:23.873 回答
0

在您的示例中设置box-flex: 1.0;（默认为0.0）#b具有预期的效果：Demo。

于 2012-03-22T00:59:48.100 回答