Chrome 和 Opera 为高度添加边框答案

【问题标题】：Chrome and Opera add border to heightChrome 和 Opera 为高度添加边框
【发布时间】：2012-11-02 02:51:29
【问题描述】：

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

【问题讨论】：

我使用的是 Firefox 16.0.2 和 Chrome 23.0.1271.64 m（或者说是这样），而在 Chrome 中，lis 实际上的高度减少了 1px，这意味着它们距离底部边框 1px但与顶部边框的距离相同。我想弄清楚为什么现在是这样。

标签： html css google-chrome opera

【解决方案1】：

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

【讨论】：