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;（我也尝试了.container没有结果）。

Chrome，Safari和Opera以相同的方式显示图片：.container具有子图片的宽度。但在Firefox（OSX）0中，宽度为signup.inc.php。

我做错了吗？有没有办法在Firefox中以相同的方式工作？

JSFiddle

Answer 1

不确定为什么导致了这个问题，但我找到了修复方法。只需将display从inline-block更新为inline只需为我工作：

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

在Chrome和Firefox上测试过。

在Firefox中，容器使用display inline-block

1 个答案: