css - Firefox 意外换行使用 float 和溢出隐藏

Question

我有一个包含两个元素的容器 div:一个 .button 和一个里面有文本的 .box。 .button 先出现，然后向右浮动。 .box 没有 float [这是一个约束 - 由于依赖于没有 float 的类似其他结构，我不能将它向左浮动]。 .box 有 overflow: hidden; 来建立一个新的 block 格式化上下文。这允许 .box 跨越“100% 直到”先前的 float 元素 .button。

.outer-container 包含所有这些内容并向右浮动。

http://jsfiddle.net/6qAwA/5/

在 Chrome(26.0.1410.12 beta-m PC、25.0.1364.99 Mac)、Safari(6.0.2 Mac)和 IE8-9 中，这将以所需的方式运行。 .box 的文本保持在一行中，并且由于 .outer-container 的右侧 float ，将恰好是它需要的大小。然而，在 Firefox 中，文本被分成另一行。

当 .button 向左浮动时，我也发现了类似的问题 - 除了 Firefox 之外，我在所有内容中都得到了期望的行为。

我看过这个 Firefox 16.0.1 和 19.0 for PC，以及 18.0.1 和 19.0 for Mac。这是错误吗？

Answer 1

我今天遇到了这个问题，即使在将其 display 设置为 inline-block 并且原因是 容器节点 的样式设置 white-space 设置为 nowrap。 因此，在 container 节点 上将 white-space 的值重置为 normal 为我解决了这个问题。