Chrome和Opera添加邊框高度

我的代碼看起來類似於此：http://jsfiddle.net/wJ6V5/Chrome和Opera添加邊框高度

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裏，元素不在主div的中間。距離上邊界1px。

我認爲這是因爲Chrome和Opera爲li高度添加邊框高度，所以在這些瀏覽器中，li元素比FF高1px，但我不確定這是否是原因。

有什麼方法可以解決它嗎？我想在Chrome和Opera中使用和Firefox一樣的效果。或者是有其他方法來設置li元素在u_menu div中間？

來源

2012-11-13 user1409508

我使用的是Firefox 16.0.2和Chrome 23.0.1271.64米（或者它說的），在Chrome中實際上它的高度只有1px，這意味着它們離底部邊界距離更遠1px，但距離相同到頂部邊界。我試圖弄清楚爲什麼現在。 – Silvester

問題似乎與字體大小有關。當我將它縮小爲11px時，Firefox和Chrome顯示的高度相同。我真的不知道這是爲什麼，但是例如font-size：1em與你現在的大小差不多，並且在兩種瀏覽器中都給出了相同的結果。

來源

2012-11-13 17:16:13 Silvester

Chrome和Opera添加邊框高度

回答

相關問題