Firefox：浮动容器不能正确收缩包装响应图像？

Question

这是一个非常奇怪的问题；我希望我缺少一些明显的 CSS 技巧，但我越来越想知道这是否是 Firefox 错误。设置是这样的：有一个绝对定位在所有四个侧面的#frame DIV。在这里面，有一个#viewport DIV，它的overflow-x 设置为滚动，其高度设置为100%。 （最后一点很重要。）在这里面，有一个浮动的#page_container DIV 和空白：nowrap。最后，在其中，有一堆最大高度设置为 100% 的响应式图像——即它们的高度永远不会超过容器的高度。

设置很复杂，因为想法是#viewport 是可滚动的，而#page_container（应该收缩包装所有内部图像并表示它们的总宽度）在内部左右移动。 （我希望在此设置中使用 iScroll，因此 #page_container 需要是正确的宽度。）在 Chrome 中，#page_container 是正确的宽度，当您将 #viewport 一直滚动到右侧时，您可以看到最后一张图片的结尾，没有额外的空白。

然而，在 Firefox 中，#page_container 太大了。 #viewport 滚动到 #page_container 中的最后一个图像之后，留下大量额外的空白区域。但是，这只发生在 CSS 规定的特定情况下。如果我在#frame 上设置一个特定的高度（即使离开绝对定位），空白空间也会大幅缩小（但不会消失）。如果我在#viewport 上设置特定高度时不理会#frame，则空白区域也会缩小。如果我在图像上设置一个明确的高度，空白将完全消失。

据我所知，如果你按照我的方式处理 CSS，Firefox 会收缩包装 #page_container，但假设所有图像都是 FULL SIZE，而不是在 max-height 之后缩小到的大小应用并计算容器高度。由于图像本身已正确调整大小，因此会留下大量不应存在的水平空白。

这是 JSFiddle：http://jsfiddle.net/coLv0spn/2/ （启用 iScroll 的版本：http://jsfiddle.net/chrominance/coLv0spn/6/）

HTML：

<div id="frame">
    <div id="viewport">
        <div id="page_container">
            <img src="http://dummyimage.com/1500x1920/000/fff" />
            <img src="http://dummyimage.com/1500x1920/000/f33" />
            <img src="http://dummyimage.com/1500x1920/000/3f3" />
            <img src="http://dummyimage.com/1500x1920/000/33f" />
            (...etc...)
        </div>
    </div>
</div>

CSS：

#frame {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}
#viewport {
    font-size: 0;
    height: 100%;
    overflow-x: scroll;
    overflow-y: hidden;
    position: relative;
}
#page_container {
    float: left;
    height: 100%;
    white-space: nowrap;
}
img {
    display: inline-block;
    height: auto;
    max-height: 100%;
    margin-right: 10px;
    position: relative;
    vertical-align: middle;
    width: auto;
}

Answer 1

我不确定是否需要 Viewport，但在 Firefox 中将其取出并从 #page_container 中取出浮动似乎对我有用。这是一个小提琴

http://jsfiddle.net/bnc3mn1q/7/

和css

#frame {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    overflow-x: scroll;
    overflow-y: hidden;
}

#page_container {
    height: 100%;
    white-space: nowrap;
}
img {
    display:inline-block;
    height: 100%;
    margin-right: 10px;
}
img:last-child {
    margin-right:0;   
}