overflow:hidden + display:inline-block moves text upwards [duplicate]

I have following HTML:

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

What I expect to see: abc.

What I see (in Chrome, Safari, Firefox):

b is higher than a and c. Why it is so and how to fix it?

Solution 1:

This happens because the inline-block element has height equal to its parent and overflow: hidden causes its bottom edge to be aligned on the text baseline of the parent. As a result the space that is available for descenders on the text is essentially doubled for the <span> (JSFiddle).

You can fix this by also giving it vertical-align: bottom.