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