Question

我正在使用HTML5导航，我正在使用此HTML：

<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示例

，这种情况很少

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个链接，则第一个孩子的班次消失，但链接没有适当的line-height，也不能设置链接的宽度，因为它们现在显示为inline。

问题

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

Answer 1

内联块放在当前基线上。菜单有自己的菜单，并且lis在那里对齐。添加

menu li {
    vertical-align: top;
}

并且流浪的上边缘消失了。

Answer 2

我不确定背后的原因，但它与不同浏览器呈现inline-block的方式有关。

解决方案1 

您可以将display: inline-block更改为display: block并将float: left更改为您的li元素

menu li {
    display: block;
    float: left;
    line-height: 50px;
    margin: 0;
    padding: 0;
}

解决方案2

保持display: inline-block但是添加vertical-align: top

menu li {
    display: inline-block;
    vertical-align: top;
    line-height: 50px;
    margin: 0;
    padding: 0;
}

Answer 3

将display: block; float: left;用于li //内部的标记，甚至是内联块ok。这里重要的是向左浮动。

demo

Answer 4

根据此

更改您的CSS

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

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

    a {
        display: inline;
        /*CULPRIT border: 1px solid #ccc;*/
    }

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

FiddleDemo

Answer 5

查看此示例： http://www.overpie.com/css/articles/css-vertical-fly-out-menu

我建议不要使用行高，就像你有很长的文字一样，你会遇到麻烦。

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

问题

问题

5 个答案: