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

相关文章

Css3如何实现鼠标移上变长特效?(图文+视频)
css3怎么实现鼠标悬停图片时缓慢变大效果?(图文+视频)
jquery如何实现点击网页回到顶部效果?(图文+视频)
css3边框阴影效果怎么做?(图文+视频)
css怎么实现圆角边框和圆形效果?(图文+视频教程)
Css3如何实现旋转移动动画特效