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

前端之家收集整理的这篇文章主要介绍了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

猜你在找的CSS相关文章