html - 为什么第一个LI在FF和IE中向下移动

Question

我正在使用以下 HTML 开发 HTML5 导航:

<menu>
    <li><a href="#">Test</a></li>
    <li><a href="#" class=clip>Test</a></li>
    <li><a href="#" class=clip>Test</a></li>
    <li><a href="#" class=clip>Test</a></li>
</menu>

这可以在this JSFiddle example中看到.

所有 LI 元素都显示为 inline-block。我还为其中的链接提供了 inline-block，因为我需要为它们提供特定的 line-height。

对于上面的 HTML 示例，这是 LESS

menu {
    margin: 0;
    padding: 0;
    list-style: none;
    background-color: #eee;

    li {
        margin: 0;
        padding: 0;
        line-height: 50px;
        display: inline-block;

        a {
            display: inline-block; // <--- CULPRIT
            border: 1px solid #ccc;

            &.clip {
                width: 1em;
                overflow: hidden;
            }
        }
    }
}

问题

以上代码在 Chrome 中显示得很好，但在 Firefox 和 Internet Explorer 中显示不佳(我使用的是 11)。 FF 和 IE 都显示第一个 LI 向下移动。

如果我删除链接的 inline-block，第一个 child 的类次消失，但链接没有适当的 line-height 也不能设置链接的宽度'现在显示为内联。

问题

我做错了什么，我应该如何解决这种跨浏览器的方式。

Answer 1

行内 block 放置在当前基线上。菜单有自己的菜单，列表在那里对齐。添加

menu li {
    vertical-align: top;
}

并且杂散的上边距消失了。