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上,它会呈现为： 但是 码

#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 >  <span >b</span>  <span >c1 c2</span></span><br /><hr /><br /><span >  <span >longer</span>  <span >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 >    <span >b</span>    <span >c1 c2</span></span><br /><span >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 >    <span >b</span>    <span >c1 c2</span></span><br /><span >c1 c2</span><br />^^^ without <em>.a</em> having a wIDth limit<hr />vvv with <em>.a</em> having a wIDth limit<br /><span >    <span >b</span>    <span >c1 c2</span></span><br /><span >c1 c2</span>

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

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

积分

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

总结

以上是内存溢出为你收集整理的html – 为什么要在Firefox上进行包装,使用display：block;溢出：隐藏在显示内：内联块？全部内容，希望文章能够帮你解决html – 为什么要在Firefox上进行包装,使用display：block;溢出：隐藏在显示内：内联块？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。