Question

CSS

.u_menu {
    background:#000;
    height:40px;
    width:100%;
    background-image: -moz-linear-gradient(top, #97c840, #8ab63a);
    background-image: -webkit-linear-gradient(top, #97c840, #8ab63a);
    background-image: -o-linear-gradient(top, #97c840, #8ab63a);
}
ul.u_nav {
    float:right;
    margin-right:250px;
    margin-top:7px;
}
ul.u_nav li {
    font-size:14px;
    background:#fff;
    float:left;
    margin-right:15px;
    padding:3px 10px;
    border-bottom:solid 1px #a6cd62;
    box-shadow:inset 0 1px 1px 0 #666;
    background-image: -moz-linear-gradient(top, #80ae2e, #8ebf38);
    background-image: -webkit-linear-gradient(top, #80ae2e, #8ebf38);
    background-image: -o-linear-gradient(top, #80ae2e, #8ebf38);
}

HTML

<div class="u_menu">
    <ul class="u_nav">
        <li>Test</li>
        <li>Teest</li>
    </ul>
</div>

在Firefox页面看起来不错（就像我想的那样），但在Chrome和Opera中，li元素不在主div的中间。它们距离顶部边界1px。

我认为这是因为Chrome和Opera将边框高度添加到li高度，因此在这些浏览器中，li元素比FF高1px，但我不确定这是否是一个原因。

有什么办法可以解决吗？我希望Chrome和Opera中的效果完全相同，就像在Firefox中一样。或者还有其他方法可以在 u_menu div的中间设置li元素吗？

Answer 1

问题似乎与字体大小有关。当我将它减少到11px时，Firefox和Chrome都显示相同的高度。我真的不知道为什么会这样，但是例如font-size：1em就是你现在的大小，并且在我的两种浏览器中都给出了相同的结果。

Chrome和Opera为高度添加边框

1 个答案: