cp from :?https://blog.csdn.net/iefreer/article/details/50421025

?

在表單修改界面中常會使用一個標簽、一個內容加一個修改按鈕來組成單行界面，如下所示：

?

那么在表單總長度受限的情況下，當中間的郵箱名稱過長時，會遮蓋到旁邊的按鈕。

我們可以把中間郵箱設定最大寬度，然后對于長度超出部分設置overflow: hidden來解決這個問題。

但是這可能會引發另一個經典的 baseline 對齊問題，也就是本文要討論的主要問題。

1. 問題現象

我們先給出一個在線實例：

http://wow.techbrood.com/fiddle/15438

我們可以看到當給中間的 inline-block 元素p添加overflow: hidden屬性后，其左右相鄰元素被奇怪的向下拉動了一定的距離。

?

2. 解決方法

常用的解決方法是為上述inline-block元素添加vertical-align: bottom。你可以在上面的例子中在線測試下。

3. 問題原因

W3的規范對此行為有明確規定：

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.

我們從規范中可以知道當一個inline-block元素被設置overflow非visible屬性值后，其baseline將被強制修改為元素下外邊沿。

我們知道默認情況下，baseline為字符x的底線位置且vertical-align屬性值為baseline。

此外由于div包含塊中只有行內級別的元素，所以將生成一個IFC（行內格式化上下文）來規定其中元素的渲染規則。

按照IFC布局規則，垂直方向上對齊遵照vertical-align屬性（請參考閱讀：http://techbrood.com/Guide/h5b2a?p=css-ifc），

那么p元素兩邊的2個匿名line box將被迫向下移動一個偏移值來和p元素對齊。

?

那么可能有人要進一步追問了，為什么W3要做如此奇怪的規定呢？

這是因為overflow被設置為非visible值，將使得該inline-block元素中的last line box的渲染處于不確定狀態（瀏覽器可能渲染也可能不渲染），

這讓保持默認規則的baseline也處于不確定狀態，那么索性就規定以確定的下外邊沿來作為baseline。

"baseline" - Align the baseline of the box with the baseline of the parent box.
If the box does not have a baseline, align the bottom margin edge with the parent's baseline.

4. 偏移的計算

上述的向下偏移量，實際上就是inline-block元素的默認baseline和其下外邊沿的距離。

shift = D(descent) part of Glyph（字母下降部分）+ bottom half-leading

?

5. 參考鏈接：

1.?http://techbrood.com/Guide/h5b2a?p=css-line-height

2.?http://www.w3.org/TR/CSS2/visudet.html#propdef-line-height

3.?http://www.w3.org/TR/CSS2/visudet.html#leading

?

轉載于:https://www.cnblogs.com/0616--ataozhijia/p/9189075.html

總結

以上是生活随笔為你收集整理的[Web 前端] inline-block元素设置overflow:hidden属性导致相邻行内元素向下偏移的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。