Ik heb de volgende HTML:
<div>
a<span style="overflow: hidden; display: inline-block;">b</span>c
</div>
Wat ik verwacht te zien: abc.
Wat ik zie (in Chrome, Safari, Firefox): 
bis hoger dan aen c. Waarom is het zo en hoe los je het op?
Antwoord 1, autoriteit 100%
Dit gebeurt omdat het inline-blockelement een hoogte heeft die gelijk is aan het bovenliggende element en overflow: hiddenervoor zorgt dat de onderrand wordt uitgelijnd op de tekstbasislijn van het bovenliggende element. Als resultaat wordt de ruimte die beschikbaar is voor afstammelingen op de tekst in wezen verdubbeld voor de <span>(JSFiddle ).
Je kunt dit oplossen door het ook vertical-align: bottomte geven.