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