为什么inline-block带有文本和不带文本vertical-align表现不一样
带有文本的inline-block, 好像是和最后一行的文本基线对齐
<div style="height:300px;line-height:300px;background:red;"> some text... <span style="line-height:normal;display:inline-block;height:200px;background:blue;width:100px;"> text in inline-block... </span> </div>
不带文本的inline-block，好像是inline-block的底部边缘和文本的基线对齐
<div style="height:300px;line-height:300px;background:red;"> some text... <span style="line-height:normal;display:inline-block;height:200px;background:blue;width:100px;"> <!-- no text in inline-block... --> </span> </div>
为什么会有这种差别呢
