行内块元素(inline-block)设置`overflow：hidden`，意外增加了元素整体高度的问题

[yangchch6]

前言

在处理 bee-table 的错位问题时，遇到一个 inline-block 元素设置 overflow：hidden 后，元素高度意外增大的问题。如下图，表格第一列的单元格内容是行内块元素 label 标签，其高度是0，但是父元素却被撑得很高。

问题1：Table组件里，带有复选框和tooltip的行，高度超出预期，造成错行问题。

问题2：Table组件里，带有Radio的行，高度超出预期，行高被撑得很大。

探究原因

‘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。因此高度才会看起来增加了。

解决方法：

1. 常用的解决方法是为上述inline-block元素添加vertical-align: bottom。

2. 可以将inline-block设为block，即可解决问题。

关于 Vertical-Align

• 关于Vertical-Align你需要知道的事情