Firefoxでは、コンテナが取得していない子どもたちは、表示インラインブロック

Question

を使用して幅I以下の構造を有する：基本的に

#out { 
 
    padding-bottom: 40%; 
 
    height: 0; 
 
    width: 100%; 
 
    position: relative; 
 
} 
 

 
#in { 
 
    position: absolute; 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 

 
.container { 
 
    height: 100%; 
 
    display: inline-block; 
 
} 
 

 
.image { 
 
    height: 100%; 
 
    width: auto; 
 
}

<div id="out"> 
 
    <div id="in"> 
 
    <div class="container"><img src="http://i.imgur.com/sbyPaAsl.jpg" alt="" class="image"></div> 
 
    <div class="container"><img src="http://i.imgur.com/sbyPaAsl.jpg" alt="" class="image"></div> 
 
    <div class="container"><img src="http://i.imgur.com/sbyPaAsl.jpg" alt="" class="image"></div> 
 
    </div> 
 
</div>

、height: 0;とコンテナとwidthとpadding-bottomセットでパーセンテージ（実際のシナリオでは、パディングはすべての画像に収まる正確な値であると考えられます）。その内部にposition: absolute;で親サイズを継承するコンテナ。と3つのdivsは、それぞれの子供の画像からその幅を得る隣に浮動する必要がありますdisplay: inline-block;（私も結果をfloat: left;を試してみました）を使用してください。

Chrome、Safari、Operaは同じ方法で画像を表示します。.containerは、子画像の幅を持ちます。しかし、Firefox（OSX）の.containerの幅は0です。

何か間違っていますか？ Firefoxでこれを同じように動作させる方法はありますか？

JSFiddle。

Answer 1

確かになぜそれが問題を引き起こしていたのですが、修正が見つかりました。単純にinline私のために働いたためにinline-blockからあなたdisplayを更新：

#out { 
 
    padding-bottom: 40%; 
 
    height: 0; 
 
    width: 100%; 
 
    position: relative; 
 
} 
 

 
#in { 
 
    position: absolute; 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 

 
.container { 
 
    height: 100%; 
 
    display: inline; 
 
} 
 

 
.image { 
 
    height: 100%; 
 
    width: auto; 
 
}

<div id="out"> 
 
    <div id="in"> 
 
    <div class="container"><img src="http://i.imgur.com/sbyPaAsl.jpg" alt="" class="image"></div> 
 
    <div class="container"><img src="http://i.imgur.com/sbyPaAsl.jpg" alt="" class="image"></div> 
 
    <div class="container"><img src="http://i.imgur.com/sbyPaAsl.jpg" alt="" class="image"></div> 
 
    </div> 
 
</div>

はChromeとFirefoxの上でテストされています。