Html Chrome和Opera为高度添加边框

我的代码与此类似：

CSS

HTML

试验
蒂斯特

< Firefox页面看起来很好（如我想要的），但是在Chrome和Opera里，元素不在主div的中间。它们靠近顶部边框的1px。 我认为这是因为Chrome和Opera在li高度上增加了边框高度，所以在这些浏览器中li元素比FF高1倍，但我不确定这是否是一个原因

---

有没有办法解决这个问题？我希望在Chrome和Opera中产生与Firefox完全相同的效果。或者有没有其他方法可以在u\u菜单的中间设置li元素

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

我使用的是Firefox 16.0.2和Chrome 23.0.1271.64 m（或者它说的那样），而Chrome中的lis实际上高度减少了1倍，这意味着它们距离底部边界远1px，但与顶部边界的距离相同。我现在正试图弄明白为什么会这样。

.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);
}  

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