为什么溢出：隐藏中断对等内联块元素的垂直对齐？

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

xy.blub.com/index.php?page=home强制创建新的块格式化上下文。您可以在the spec中了解它们。

Answer 2

@Alex W对您的问题有正确的答案，但我会补充说，将vertical-align: top;分配到您的列表项链接将克服该问题（如果需要）。

li a {
    vertical-align: top;
}