設置inline-block元素的overflow：hidden意外增長元素整體高度的問題

工做中遇到的一個問題，設置inline-block元素的overflow：hidden意外增長元素整體高度。

描述以下：

設 A爲子容器，B爲父容器。

A設置爲inline-block，而且overflow爲hidden，A高度爲23，B高度爲30。

A設置爲block，A高度爲23，B高度爲23。

經過stackoverflow找到緣由（http://stackoverflow.com/questions/22421782/css-overflow-hidden-increases-height-of-container），摘抄以下：

Let me explain to you why this is happening.

According to CSS 2.1 Specs,

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.

To explain in simple words,

i) If inline-block in question has its overflow property set to visible (which is by default so no need to set though). Then its baseline would be the baseline of the containing block of the line. ii) If inline-block in question has its overflow property set to OTHER THAN visible. Then its bottom margin would be on the baseline of the line of containing box.

So, in your case the inline-block cell has overflow:hidden (not VISIBLE), so its margin-bottom, the border of cell is at the baseline of the container element container.

That is why the element cell looks pushed upwards and the height of container appears increased. You can avoid that by setting cell to display:block.

翻譯以下：

 'inline-block'的baseline是其在normal flow中的最後一個line box的baseline，除非它沒有in-flow line boxes，或者其‘overflow’屬性不等於‘visible’，這種狀況下，其baseline位於bottom margin邊上。

解釋以下：

i) 若是inline-block的overflow設爲visible（默認屬性），則其baseline是當前行的containing block的baseline。

ii) 若是overflow設爲其餘，則其bottom margin位於前行的containing block的baseline；

咱們這種狀況下，inline-block元素的overlow：hidden，因此元素的底部邊框在父元素的baseline。

所以高度纔會看起來增長了。

能夠將inline-block設爲block，便可解決問題。

PS 待補充