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

我有以下的HTML：

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

我期望看到： abc 。

我所看到的（在Chrome，Safari，Firefox中）：

b高于a和c 。 为什么是这样以及如何解决？

Answer 1

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

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