Why does overflow:hidden break vertical alignment of peer inline-block elements?

Question

Compare these two JSFiddles:

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

Why does the first show my text aligned as I expect, yet the second displays the first link lower than the second?

Stack overflow wants me to include the code from them, so here is the first:

<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;
}

The second only adds a single line,the overflow:

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

Answer 1

The overflow:hidden forces the creation of a new block formatting context. You can read about them in the spec.

Answer 2

@Alex W has the right answer to your question, but I will add that assigning vertical-align: top; to your list-item links will overcome the issue (if needed.)

li a {
    vertical-align: top;
}