使用浮动和放大器的Firefox意外换行溢出隐藏

Question

我有一个包含两个项目的容器div：.button和.box里面有文字。 .button首先出现并且正确地浮动。 .box没有浮动[这是一个约束 - 由于类似的其他依赖于没有浮动的结构，我无法将其浮动）。 .box有overflow: hidden;来建立新的块格式化上下文。这允许.box跨越“100％直到”前一个浮动元素.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的右浮动，将完全是它需要的大小。但是，在Firefox中，文本被分成另一行。

当.button向左浮动时，我也发现了一个类似的问题 - 除了Firefox之外，我得到了所有行为。

我已经看到这款适用于PC的Firefox 16.0.1和19.0以及适用于Mac的18.0.1和19.0。这是一个错误吗？

Answer 1

我今天遇到过这个问题，即使将display设置为inline-block之后，浮动节点也会在Firefox中断行，其原因是< b>容器节点的样式设置white-space设置为nowrap。 因此，在容器节点上将white-space的值重置为normal可以解决此问题。

Answer 2

将display: inline-block;添加到.box：

Demo

Answer 3

实际上，当你想要一个类似的解决方案时 http://jsfiddle.net/Volker_E/x5rPd/ 您不需要第二个div来表达您想要的行为。

Answer 4

white-space: normal没有为我做这个伎俩。在直接文本容器上有效white-space: nowrap;。