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.
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
:
这篇关于Firefox意外换行使用浮动&溢出隐藏的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!