CSS 2.1 中為何規定行內塊元素的「overflow」為非「visible」時其基線是底部外邊界？

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.

規範地址：Visual formatting model details

Demo：JS Bin - Collaborative JavaScript Debugging

示例中，overflow 為 auto 時，按照規範的表現應該是這樣的：

Chrome 30 之前表現存在錯誤：

inline-block 的 baseline 是一個坑。（inline-block 這個本來就是後加的，在最早的 CSS2 里是沒有的。從這個角度說，inline-block 的行為更多的是 CSS 2.1 對瀏覽器實現的確認，也就是基於瀏覽器開發者對 CSS 的理解和推導，而不是 CSS 最初設計者的想法。
）

顯然，在 overflow: visible 時的定義並不能用於非 visible ，因為當有 scrolling 時，你無法確定 last line box 的位置。那麼這個時候，合理的定位就只有 box 的邊界。而這個 box 實際上類似 iframe，所以從一致性上說應底邊對齊。

然而這在 overflow: visible 時造成問題，當元素有內容（與最後一行對齊）和沒有內容（與底邊對齊）時，布局會發生顯著的變化。計子@程劭非 曾吐槽過這個。

相對來說，如果默認行為是與首行而不是末行對齊可能就沒有這個問題，但是這樣與圖片對齊（圖片底邊與父元素的 baseline 對齊）看上去就太不一致。而圖片對齊是 CSS1 時代確定的，當時並沒有 inline-block 。