html - 为什么在 Firefox 上换行，显示为 : block; overflow: hidden inside a display: inline-block?

Question

代码

#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中试试.

问题

1. 为什么会有这种差异？这是 Firefox 的错误吗？ (如果是错误，我会对指向该错误的链接感兴趣，因此我可以投票赞成修复它。)
2. 如何让 Firefox 像 Chrome 一样呈现它，考虑到下一节中提到的一些限制？

上下文

这里只是一些上下文，没有它我在上面尝试做的事情可能看起来很疯狂。我打算将上述 block 用于标签，例如:

元素#a、#b和#c对应于:

CSS 旨在处理以下约束:

1. 需要这个才能与 IE8 一起使用(我没有 flexbox)。
2. Block #a 是可点击的，我不希望它向右扩展超过必要的范围，因此使用了 inline-block。但显然，另一种方法也可以做到这一点。
3. #c block 的内容如果变得太长则必须换行，并且不应位于#b block 的“下方”，如下所示。这解释了 overflow: hidden 或 display: table。

Answer 1

修复

不混，抱 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 在计算其收缩至适合大小时使 float 元素完全脱离流动。虽然 float 会影响流入内容的宽度，但它们本身并不是流入内容，因此只是占用其余内容的水平空间 - 导致您看到的行为

这是正在发生的事情的演示(在 Firefox 中查看以实际看到它)。请注意，outline 用于 .a 和 .c 但粗 border (实际上占用空间) 用于 .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你会发现 float 被标记为流出，并且 the spec regarding block-formatting and inline-formatting明确指出 float 是内联上下文宽度的一部分，但不是 block 上下文(inline-block 的内部)。因此，Firefox 实际上是根据规范的严格解释来运行的——这在技术上是其他浏览器中的一个错误。

然而，Firefox 如何做到这一点仍然存在问题。

如果我们使 float 大于我们的流入内容(并切换回边框，因为轮廓包括溢出的子项；我将同级红色向左移动 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 的严格解释，蓝色盒子被拉伸(stretch)以包含其整个绿色 child 。 ，它应该会溢出。这是 Firefox 的一个错误，因为 float 只应该在内联上下文中影响父 width:auto。在 block 上下文中，inline-block 的内部应该是， float 的宽度不包括在内。

请注意，这也是大多数其他浏览器的行为方式(在某种程度上 - Firefox 会将父级的大小设置为 float 的框宽度，而其他浏览器会将流入放在它旁边如果父级仍然可以增长)，并且如果您提供任何 width 值或 .a 的限制(在我的示例中为 .e) ，您会得到绿色 float 溢出其父级的预期行为(如图所示)(在所有浏览器中都应该如此，因为所有这些行为问题都基于 width:auto)。

---

致谢

Oriol 的很多啤酒(另一个答案的海报)- 如果我没有开始与他争论这个，我就没有理由真正进入规范并弄清楚什么是 真的正在发生。还要感谢他指出 Firefox 仍然错误地呈现它 - 整 block 都归功于他。