0

我正在使用此 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>

这可以在这个 JSFiddle 示例中看到。

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

问题

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

4

5 回答 5

2

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

menu li {
    vertical-align: top;
}

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

于 2013-10-01T11:33:53.073 回答
1

我不确定背后的原因，但它与不同浏览器的呈现方式有关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;
}
于 2013-10-01T11:20:33.530 回答
0

display: block; float: left;在 li // 甚至 inline-block 中使用您的 a 标签即可。这里重要的是向左浮动。

演示

于 2013-10-01T11:18:18.573 回答
0

你根据这个改变你的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;
        }

小提琴演示

于 2013-10-01T11:28:54.227 回答
0

见这个例子： http ://www.overpie.com/css/articles/css-vertical-fly-out-menu

我建议不要使用 line-height，因为如果你有长文本，你会遇到麻烦。

于 2013-10-01T11:40:32.957 回答