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

Question

我有以下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导致其底边在父级的文本基线上对齐。因此，对于<span>（JSFiddle），文本中下划线可用的空间基本上加倍。

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