溢出:隐藏+显示:内联块向上移动文本

我有以下的HTML:

<div> a<span style="overflow: hidden; display: inline-block;">b</span>c </div> 

我期望看到: abc

我所看到的(在Chrome,Safari,Firefox中): ABC

b高于ac 。 为什么是这样以及如何解决?

发生这种情况的原因是, inline-block元素的高度等于其父项和overflow: hidden导致其下边缘与父项的文本基线alignment。 因此,对于<span> ( JSFiddle ),文本上的下行可用空间基本上翻倍了。

你也可以通过vertical-align: bottom来解决这个问题。