我为我看到的问题创建了一个简化的测试用例：
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）。