Почему переполнение: скрытый разрыв вертикального выравнивания одноранговых элементов однорангового узла?

Question

Сравните эти два JSFiddles:

• http://jsfiddle.net/am28dsbz
• http://jsfiddle.net/am28dsbz/1/

Почему первый показывают мой текст, выровненные, как я ожидал, но вторая отображает первую ссылку ниже, чем второй?

переполнение стека хочет, чтобы включить код из них, так вот первый:

<ul> 
    <li> 
     <a class="link1">hello</a> 
     <span></span> 
     <a class="link2" href="www.google.com">there</a> 
    </li> 
</ul> 

.link1 
{ 
    display: inline-block; 
} 
.link2 
{ 
    display: inline-block; 
} 

Второй только добавляет одну строку, переполнение:

.link2 
{ 
    display: inline-block; 
    overflow: hidden; 
} 

Answer 1

overflow:hidden заставляет создание нового контекста форматирования блока. Вы можете прочитать о них в the spec.

Answer 2

@Alex W имеет правильный ответ на ваш вопрос, но я добавлю, что назначение vertical-align: top; в свой список-элементов ссылок преодолеет вопрос

li a { 
    vertical-align: top; 
}