0

我的代码看起来类似于这个：http: //jsfiddle.net/wJ6V5/

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 元素？

4

1 回答 1

0

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

于 2012-11-13T17:16:13.827 回答