発生している問題に対して縮小テスト ケースを作成しました。
http://codepen.io/benfrain/pen/anDmL
JS を使用せずに、そこに挿入されるコンテンツの正しい幅である水平方向にスクロール可能な領域を作成したいと考えています。最初の子をインラインにすることで、この問題は大幅に解決されます。でも：
そのリンクを Chrome/Safari で表示すると、レイアウトは期待どおりに動作します (少なくとも私には)。各ボックスは直線的に配置され、水平方向にスクロール可能な領域が作成されます。
ただし、Firefox (v22) と Opera (v12.16) はそうではありません。各ボックスを上下に積み重ねて、水平方向にスクロール可能な領域を作成しません。
どちらの実装が正しいですか?(両方を同じように実行する CSS のみ)方法はありますか?
Firefox ( https://bugzilla.mozilla.org/show_bug.cgi?id=902400 ) にバグを報告したところ、「間違っている」のは Safari/Chrome のようです。この問題は、インライン要素間の空白が原因で発生します。ソース HTML (最も幅広いサポート) でそれを削除するかwhite-space: nowrap;、親要素で使用すると、最新のブラウザーの問題が修正されます。
Firefox チームは、Chrome ( http://code.google.com/p/chromium/issues/detail?id=269500 ) と Safari ( https://bugs.webkit.org/show_bug )の両方について、この問題に関するバグを公開しました。 .cgi?id=119544 )。