在 Firefox 中，容器不会使用显示内联块获取子宽度

Question

我有以下结构：

#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，应该在另一个旁边浮动一个divs，使用display: inline-block;从每个孩子图像中获取其宽度（我也尝试了float: left;，没有结果）。

Chrome，Safari和Opera以相同的方式显示图像：.container具有儿童图像的宽度。但是在Firefox（OSX）中，.container宽度为0。

我做错了什么吗？有什么方法可以在Firefox中以相同的方式工作？

jsfiddle。

Answer 1

不确定为什么它引起了问题，但我找到了一个修复程序。只需将inline-block从CC_11更新到inline为我工作：

#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上测试。