在表單修改界面中常會(huì)使用一個(gè)標(biāo)簽扮叨、一個(gè)內(nèi)容加一個(gè)修改按鈕來(lái)組成單行界面沉桌，如下所示：
那么在表單總長(zhǎng)度受限的情況下，當(dāng)中間的郵箱名稱過(guò)長(zhǎng)時(shí)浴滴，會(huì)遮蓋到旁邊的按鈕拓萌。
我們可以把中間郵箱設(shè)定最大寬度，然后對(duì)于長(zhǎng)度超出部分設(shè)置overflow: hidden來(lái)解決這個(gè)問(wèn)題升略。
但是這可能會(huì)引發(fā)另一個(gè)經(jīng)典的 baseline 對(duì)齊問(wèn)題微王，也就是本文要討論的主要問(wèn)題。
1. 問(wèn)題現(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. 問(wèn)題原因
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)格式化上下文）來(lá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è)偏移值來(lái)和p元素對(duì)齊球拦。
那么可能有人要進(jìn)一步追問(wèn)了，為什么W3要做如此奇怪的規(guī)定呢？
這是因?yàn)閛verflow被設(shè)置為非visible值坎炼，將使得該inline-block元素中的last line box的渲染處于不確定狀態(tài)（瀏覽器可能渲染也可能不渲染）愧膀，
這讓保持默認(rèn)規(guī)則的baseline也處于不確定狀態(tài)，那么索性就規(guī)定以確定的下外邊沿來(lái)作為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
