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

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.