Переполнение: скрытый + дисплей: встроенный блок перемещает текст вверх

У меня есть следующий HTML:

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

Что я ожидаю увидеть: abc.

Что я вижу (в Chrome, Safari, Firefox):

b выше a и c. Почему это так и как его исправить?

Ответ 1

Это происходит потому, что элемент inline-block имеет высоту, равную ее родительскому элементу, а overflow: hidden вызывает выравнивание нижнего края в исходной строке исходного текста. В результате пространство, которое доступно для descenders в тексте, по существу удваивается для <span> (JSFiddle).

Вы можете исправить это, указав также vertical-align: bottom.