使用浮动和溢出隐藏的Firefox意外断行

Chr*_*ris 14 css firefox overflow css-float

我有一个容器div,它包含两个项目:a .button和a .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.这是一个错误吗?

Bas*_*jan 42

我今天在碰到这个问题浮动节点会甚至其设置后打破只在Firefox线display,以inline-block和其中的原因是,集装箱节点具有的样式设置white-space设置为nowrap.因此,重置容器节点上的white-spaceto 值为我解决了这个问题.normal

  • 这对我有用 - 容器元素是一个按钮,并将其设置为`white-space:normal`修复了问题.谢谢! (2认同)

adr*_*ift 5

添加display: inline-block;.box:

演示