css – 使用float和overflow隐藏的Firefox意外换行符

我有一个容器div,其中包含两个项目：a.按钮和一个带有文本的.Box.先到先得,漂浮正确. .Box没有浮动[这是一个约束 – 我不能浮动它留下,因为类似的其他结构依赖于没有浮动]. .Box有overflow：hidden;建立一个新的块格式化环境.这允许.Box跨越“100％到”之前的浮动元素,按钮.

所有这些都集合在一起,并被浮动.

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以外的所有东西.

我已经看到这个Firefox 16.0.1和19.0为PC,18.0.1和19.0为Mac.这是一个bug吗？

解决方法

添加显示：inline-block;到.Box：

Demo

原文地址：https://www.jb51.cc/css/217356.html