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

?

在表單修改界面中常會(huì)使用一個(gè)標(biāo)簽、一個(gè)內(nèi)容加一個(gè)修改按鈕來組成單行界面，如下所示：

?

那么在表單總長度受限的情況下，當(dāng)中間的郵箱名稱過長時(shí)，會(huì)遮蓋到旁邊的按鈕。

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

但是這可能會(huì)引發(fā)另一個(gè)經(jīng)典的 baseline 對(duì)齊問題，也就是本文要討論的主要問題。

1. 問題現(xiàn)象

我們先給出一個(gè)在線實(shí)例：

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

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

?

2. 解決方法

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

3. 問題原因

W3的規(guī)范對(duì)此行為有明確規(guī)定：

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.

我們從規(guī)范中可以知道當(dāng)一個(gè)inline-block元素被設(shè)置overflow非visible屬性值后，其baseline將被強(qiáng)制修改為元素下外邊沿。

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

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

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

那么p元素兩邊的2個(gè)匿名line box將被迫向下移動(dòng)一個(gè)偏移值來和p元素對(duì)齊。

?

那么可能有人要進(jìn)一步追問了，為什么W3要做如此奇怪的規(guī)定呢？

這是因?yàn)閛verflow被設(shè)置為非visible值，將使得該inline-block元素中的last line box的渲染處于不確定狀態(tài)（瀏覽器可能渲染也可能不渲染），

這讓保持默認(rèn)規(guī)則的baseline也處于不確定狀態(tài)，那么索性就規(guī)定以確定的下外邊沿來作為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. 偏移的計(jì)算

上述的向下偏移量，實(shí)際上就是inline-block元素的默認(rèn)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

?

轉(zhuǎn)載于:https://www.cnblogs.com/0616--ataozhijia/p/9189075.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。