1

Firefoxで、A幅/高さが固定されたdivBがあり、幅と高さが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の宣言で、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は、目的の効果があります：デモ。

于 2012-03-22T00:59:48.100 に答える