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

我不知道，如果视口是必需的，但把它拿出来，并从#page_container浮出水面似乎适用于我在Firefox中。这里有一个小提琴

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