Firefox意外换行使用浮动&溢出隐藏 [英] Firefox unexpected line break using floats & overflow hidden

问题描述

我有一个容器div，包含两个项目： .button 和一个 .box .button 先排在右边。 .box 没有浮动[这是一个约束 - 我不能浮动左边，因为类似的其他结构，依赖于没有浮动]。 .box 具有 overflow：hidden; 以建立新的块格式化上下文。这允许 .box 跨越100％到之前的浮动元素 .button 。

.outer-container 容纳所有这些并悬浮。

I have a container div that holds two items: a .button and a .box with text inside. .button comes first and is floated right. .box has no float [this is a constraint - I can't float it left due to similar other structures that depend on there being no float]. .box has overflow: hidden; to establish a new block formatting context. This allows .box to span "100% up to" the prior floated element, .button.

.outer-container houses all of these and is floated right.

http://jsfiddle.net/6qAwA/5/

In Chrome (26.0.1410.12 beta-m PC, 25.0.1364.99 Mac), Safari (6.0.2 Mac), and IE8-9, this will act in a desired way. .box's text stays on one line, and due to .outer-container's right float, will be exactly the size it needs to be. In Firefox, however, the text is broken into another line.

I also find a similar issue when .button is instead floated left - I get desired behavior in everything except for Firefox.

I've seen this Firefox 16.0.1 and 19.0 for PC, and 18.0.1 and 19.0 for Mac. Is this a bug?

解决方案

Add display: inline-block; to .box:

Demo

这篇关于Firefox意外换行使用浮动&溢出隐藏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！