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不对齐的情况。

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