在 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 个 div，它们应该一个接一个地浮动，使用 display: inline-block; 从每个子图像获取其宽度（我也尝试 float: left; 但没有结果）。

Chrome，Safari 和 Opera 显示图像的方式相同：.container 具有子图像的宽度。但是在 Firefox 中 (OSX) .container 宽度是 0.

我是不是做错了什么？有什么方法可以让这个在 Firefox 中以同样的方式工作吗？

JSFiddle.

Answer 1

不确定为什么它会导致问题，但我找到了解决方法。只需将您的 display 从 inline-block 更新为 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 上测试。

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

In Firefox, container doesn't get children width using display inline-block

css

firefox

display