我为我遇到的问题创建了一个简化的测试用例：
http://codepen.io/benfrain/pen/anDmL
我想创建一个可水平滚动的区域，该区域的宽度正确，无需使用JS即可插入任何内容。让第一个内联儿童在很大程度上解决了这个问题。但是：
在Chrome / Safari上查看该链接，布局的行为符合预期（至少由我来）。每个框都是线性布局的，创建了一个可水平滚动的区域。
然而，Firefox（v22）和Opera（v12.16）没有 - 它们将每个盒子堆叠在另一个盒子下面，并且不创建水平可滚动区域。
哪种实现是正确的，有没有办法（CSS只能让两者以相同的方式执行）？
答案 0 :(得分：0)
在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）打开了错误。