在表單修改界面中常會使用一個標(biāo)簽、一個內(nèi)容加一個修改按鈕來組成單行界面，如下所示：
那么在表單總長度受限的情況下，當(dāng)中間的郵箱名稱過長時，會遮蓋到旁邊的按鈕。
我們可以把中間郵箱設(shè)定最大寬度，然后對于長度超出部分設(shè)置overflow: hidden來解決這個問題。
但是這可能會引發(fā)另一個經(jīng)典的 baseline 對齊問題，也就是本文要討論的主要問題。
1. 問題現(xiàn)象
我們先給出一個在線實例：
http://wow.techbrood.com/fiddle/15438
我們可以看到當(dāng)給中間的 inline-block 元素p添加overflow: hidden屬性后，其左右相鄰元素被奇怪的向下拉動了一定的距離。
2. 解決方法
常用的解決方法是為上述inline-block元素添加vertical-align: bottom。你可以在上面的例子中在線測試下。
3. 問題原因
W3的規(guī)范對此行為有明確規(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)一個inline-block元素被設(shè)置overflow非visible屬性值后，其baseline將被強制修改為元素下外邊沿。
我們知道默認(rèn)情況下，baseline為字符x的底線位置且vertical-align屬性值為baseline。
此外由于div包含塊中只有行內(nèi)級別的元素，所以將生成一個IFC（行內(nèi)格式化上下文）來規(guī)定其中元素的渲染規(guī)則。
按照IFC布局規(guī)則，垂直方向上對齊遵照vertical-align屬性（請參考閱讀：http://techbrood.com/Guide/h5b2a?p=css-ifc），
那么p元素兩邊的2個匿名line box將被迫向下移動一個偏移值來和p元素對齊。
那么可能有人要進(jìn)一步追問了，為什么W3要做如此奇怪的規(guī)定呢？
這是因為overflow被設(shè)置為非visible值，將使得該inline-block元素中的last line box的渲染處于不確定狀態(tài)（瀏覽器可能渲染也可能不渲染），
這讓保持默認(rèn)規(guī)則的baseline也處于不確定狀態(tài)，那么索性就規(guī)定以確定的下外邊沿來作為baseline。
4. 偏移的計算
上述的向下偏移量，實際上就是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
