# overflow:hidden display:inline-block 行内对齐问题 <iframe width="100%" height="300" src="//jsrun.net/rBiKp/embedded/all/light/" allowfullscreen="allowfullscreen" frameborder="0"></iframe> 首先引用规范中的这句话： > 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. 这句话的意思是行级盒的baseline是这盒子下面的正常流中的最后一个行盒，除非给这个盒子以overflow不为visible的值。 也就是说，当overflow不为visible时，这个盒子的baseline就不遵循“行级盒的baseline是这盒子下面的正常流中的最后一个行盒”这一规则了。 紧接着又说了，此时的baseline是这个盒子的下外边bottom margin edge（BFC元素底边界） 那个span给了overflow:hidden后，它的baseline变成了它的下外边了，而其它两个行级盒的baseline是在下底边靠上一点的位置。而这三个行级盒默认的vertical-align值是baseline的，所以才会那样对齐。 所以解决办法就是让其基线保持一致，vertical-align:bottom|top