У меня есть следующий 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.