溢出滾動 - 爲什麼WebKit/Blink的行爲與Opera/Firefox不同？

Question

我創建了一個減少的測試用例，我看到的問題：

http://codepen.io/benfrain/pen/anDmL

我想創建一個水平滾動地區，是無論什麼內容的正確寬度被插入其中，而無需使用JS。讓第一批在線兒童在很大程度上解決了這個問題。但是：

在Chrome/Safari瀏覽器上查看該鏈接，佈局的行爲與預期相同（至少我是這樣）。每個盒子都按照線性方式創建了一個可水平滾動的區域。但是，Firefox（v22）和Opera（v12.16）不會 - 它們會將每個盒子疊放在另一個盒子下面，而不會創建可水平滾動的區域。

哪個實現是正確的，是否有任何方法（只有CSS才能以同樣的方式執行）？

Answer 1

已經提交了一個Firefox的錯誤（https://bugzilla.mozilla.org/show_bug.cgi?id=902400），它似乎是Safari/Chrome「做錯了」。該問題是由於內聯元素之間的空白造成的。要麼刪除源HTML（最廣泛的支持）或使用父元素上的white-space: nowrap;修復了現代瀏覽器中的問題。

對於Chrome（http://code.google.com/p/chromium/issues/detail?id=269500）和Safari（https://bugs.webkit.org/show_bug.cgi?id=119544），Firefox團隊現在都對此問題開放了一些錯誤。