chrome浏览器 两个span元素 并列一行高度不一致

今天写测试页面对时候发现的问题，感觉又刷新了三观。测试代码如下

<div>
             <span class="span1">第一个</span>
             <span class="span1">第二个</span>
</div>

代码的css样式如下：

.span1{
   display: inline-block;
    overflow: hidden;
    height: 32px;
    line-height: 32px;
}
.span2{
    display: inline-block;
    overflow: hidden;
    height: 32px;
    line-height: 32px;
}

这个chrome页面没有问题，可是其中任意一个span改变他的display或者overflow，就会出现两个span不对齐的情况。

这一点甚是困惑，有大神知道欢迎留言指教。