行內元素中一個 display:none; overflow:hidden;導致的問題？

01-14

代碼如下
&
&
&sss&&sss&sss
&

&
把css直接內聯是為了各位粘貼方便，直接看效果，，，
展現效果如下。
求解，為撒呀？？？我試著用 BFC 和 IFC 的概念，都解釋不通。
－－－－－－－－－－－－－－－－－－－－－－－－－－－－
下面為加的信息
－－－－－－－－－－－－－－－－－－－－－－－－－－－－
大家可以根據各區域顏色的不同來看實際渲染出的高度，寬度等信息。

大家也可以調一下各個部分的 line-height 和 vertical-align 來看看渲染結果。
－－－－－－－－－－－－－－－－－－
上面為加的信息
－－－－－－－－－－－
下面給出解決方案。
中間那個 span ，vertical-align: bottom; 或者 top ；或者改小他的 line-height 即可解決。
求教各路大神，，，為撒會產生幾px的差距？？

瀉藥

簡化下：

& &sss&&sss&sss &

overflow:hidden;display:inline-block;

後其實是行內塊元素且BFC

所以他在IFC中vertical-align:baseline 中 baseline 文字就不是其內部文字的 baseline了

成為了BFC元素底邊界

相對於替換元素baseline認定

你的line-height沒設置

用默認值 normal

這玩意UA控制多大的

雖然規範推薦是1-1.2 但然並卵

總之UA就是給的了那麼高

本來大家都是妥妥的baseline對齊

來個 baseline 是底的

那就往上對去唄

所以你的 vertical-align 和 line-height 修改解決方案能找補回來

首先引用規範中的這句話：

The baseline of an "inline-block" is the baseline of its last line box in the normal flow, unless it has either no in-flow line boxes or if its "overflow" property has a computed value other than "visible", in which case the baseline is the bottom margin edge.

這句話的意思是行級盒的baseline是這盒子下面的正常流中的最後一個行盒，除非給這個盒子以overflow不為visible的值。

也就是說，當overflow不為visible時，這個盒子的baseline就不遵循「行級盒的baseline是這盒子下面的正常流中的最後一個行盒」這一規則了。

緊接著又說了，此時的baseline是這個盒子的下外邊bottom margin edge

題主所遇到的問題，就是因為那個span給了overflow:hidden後，它的baseline變成了它的下外邊了，而其它兩個行級盒的baseline是在下底邊靠上一點的位置。而這三個行級盒默認的vertical-align值是baseline的，所以才會那樣對齊。

所以解決辦法就是讓其基線保持一致，baseline是不行了，那就換top唄，top反正是對齊的。然後就OK了嘛

vertical-align:bottom咯