html - Firefox: float 容器不能正确收缩包裹响应图像？

Question

这是一个非常奇怪的问题；我希望我遗漏了一些明显的 CSS 技巧，但我越来越怀疑这是否是 Firefox 的错误。设置是这样的:有一个#frame DIV 绝对定位在所有四个边上。在其中，有一个 #viewport DIV，其 overflow-x 设置为滚动，高度设置为 100%。 (这最后一点被证明很重要。)在这里面，有一个 float 的 #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，但假设所有图像都是完整尺寸，而不是它们在 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 是否是必需的，但是将它取出并从 #page_container 中取出 float 似乎在 Firefox 中对我有用。这是一个 fiddle

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