html – 为什么要在Firefox上进行包装,使用display：block;溢出：隐藏在显示内：内联块？

码

#a {
  display: inline-block;
}
#b {
  float: left;
}
#c {
  display: block;
  overflow: hidden;
}

<span id="a">
    <span id="b">b</span>
    <span id="c">c1 c2</span>
</span>

在Chrome和IE上,它会呈现为：

但是,Firefox将其呈现为：

你可以在this jsFiddle试试.

问题

>为什么这个区别？这是Firefox的错误吗？ (如果是,一个bug,我会对bug的链接感兴趣,所以我可以投票给它修复.)
>考虑到下一节中提到的一些限制,如何让Firefox像Chrome一样呈现这个？

上下文

这里只是一些背景,没有它,我上面试图做的事情似乎很疯狂.我打算使用上面的块作为标签,例如：

元素#a,#b和#c对应于：

CSS旨在处理以下约束：

>需要这个用IE8(对我来说没有flexBox).
>块#a是可点击的,我不希望它向右扩展到超出必要的范围,因此是内联块.但显然,另一种方法也可以.
>块#c的内容如果变得太长就必须换行,并且不应该在块#b的“下面”,如下所示.这解释了overflow：hidden或display：table.

解决方法

修复

不要混合,拥抱桌子！

在Firefox(测试31.2.0)和IE 8上“修复”它,并且老实说在语义上更正确.

.a{ display:inline-table; max-width:45%; }
.b{ display:table-cell; padding-right:5px;}
.c{ display:table-cell; }

<span class="a">
  <span class="b">b</span>
  <span class="c">c1 c2</span>
</span>

<br /><hr /><br />

<span class="a">
  <span class="b">longer</span>
  <span class="c">Bacon ipsum dolor amet excepteur laboris irure,corned beef minim pastrami venison in anim incididunt strip steak ea non doner.</span>
</span>

为什么会出现问题

原始代码的问题在于Firefox在计算缩小尺寸时会使浮动元素完全脱离流量.虽然浮动影响流入内容宽度,但它们本身并不在流动中,因此仅仅从内容的其余部分获取水平空间 – 导致您看到的行为

以下是对正在发生的事情的演示(在Firefox中查看以实际看到它).请注意,在.a和.c上使用轮廓,但在.b上使用粗边框(实际占用空间).

.a { display: inline-block; outline: 1px solid blue; }
.b { float: left; border: 5px solid green; }
.c { display: table; outline: 1px solid red; }

<span class="a">
    <span class="b">b</span>
    <span class="c">c1 c2</span>
</span>
<br />
<span class="c">c1 c2</span>

这是设计而非错误,并且检查the current spec,the basic box model working draft和the spec regarding calculating widths您会发现浮点数被标记为流出,the spec regarding block-formatting and inline-formatting明确指出浮点数是内联上下文宽度的一部分,但不是对于块上下文(内联块的内部).因此,Firefox实际上是根据对规范的严格解释来表现的 – 这在技术上是其他浏览器中的一个错误.

然而,Firefox仍然存在一个问题.

如果我们使浮动大于我们的流入内容(并切换回边界,因为轮廓包括溢出的孩子;我已经将兄弟红色向左移动了1px,因此它将与其侄子克隆对齐)(再次,在Firefox中查看) )

.a { display: inline-block; border: 1px solid blue; }
.b { float: left; border: 5px solid green; width:200px; }
.c { display: table; border: 1px solid red; }
.d { position:relative; left:1px; }
.e { max-width:100px; }

<span class="a">
    <span class="b">b</span>
    <span class="c">c1 c2</span>
</span>
<br />
<span class="c d">c1 c2</span>
<br />
^^^ without <em>.a</em> having a width limit
<hr />
vvv with <em>.a</em> having a width limit
<br />
<span class="a e">
    <span class="b">b</span>
    <span class="c">c1 c2</span>
</span>
<br />
<span class="c d">c1 c2</span>

蓝色框被拉伸以包含其整个绿色孩子,尽管根据the spec的严格解释,它应该溢出.这是Firefox的一个错误,因为浮点数只应该影响父宽度：内联上下文中的auto.在块内容中,内联块的内部应该是,不包括浮点的宽度.

请注意,这也是大多数其他浏览器的行为(在某种程度上 – Firefox会将父级的大小调整为浮动的盒子宽度,而其他浏览器会在父级仍可以增长的情况下将其放在旁边),如果你提供任何宽度值或限制.a(在我的例子中是ala .e),你得到溢出其父级的绿色浮点数的预期行为(如图所示)(在所有浏览器中应该是这种情况,因为所有这些行为问题都是基于宽度：自动).

积分

Oriol的许多啤酒(另一个答案的海报) – 如果我没有开始与他争论,我就没有理由真正了解规格并弄清楚究竟发生了什么.同样值得称道的是他指出Firefox仍然错误地渲染它 – 整个组块都归功于他.

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