Question

我发现Firefox和Chrome / IE之间的图像尺寸调整不一致。

我有一个水平可滚动div，其中包含的图像应该调整大小以保持其宽高比，同时填充div的可用高度。这适用于Chrome / IE，但在Firefox中我看到每张图片右侧有额外的间距。

删除滚动条可以消除额外的间距，因此Firefox似乎没有使用添加的滚动条正确地重新计算div的大小。

纯html / css片段：

＆＃13;

.container {
  width: auto;
  overflow-x: scroll;
  overflow-y: auto;
  height: 100px;
  white-space: nowrap;
  display: inline-block;
  width: 100%;
}
.div {
  white-space: nowrap;
}
.innerContainer {
  height: 100%;
}
.imgHolder {
  display: inline-block;
  max-width: 100%;
  width: auto;
  height: 100%;
}
img {
  max-width: 100%;
  max-height: 100%;
}

＆＃13;

<div class='container'>
  <div class='innerContainer'>
    <div class='imgHolder' style='background:blue'>
      <img src="http://placekitten.com/500/300">
    </div>
    <div class='imgHolder' style='background:red'>
      <img src="http://placekitten.com/300/300">
    </div>
    <div class='imgHolder' style='background:green'>
      <img src="http://placekitten.com/200/300">
    </div>
    <div class='imgHolder' style='background:red'>
      <img src="http://placekitten.com/200/300">
    </div>
    <div class='imgHolder' style='background:blue'>
      <img src="http://placekitten.com/200/300">
    </div>
    <div class='imgHolder' style='background:green'>
      <img src="http://placekitten.com/200/300">
    </div>
    <div class='imgHolder' style='background:blue'>
      <img src="http://placekitten.com/200/300">
    </div>
  </div>
</div>

＆＃13;

为了清晰起见，在包含图像的div上添加了彩色背景。这个空间不应该存在。

在Firefox中解决这个问题的想法？

Firefox图像在水平滚动条

0 个答案: