導航欄寬度錯誤 - 不同瀏覽器

Question

我的CSS/HTML導航欄出現問題。我目前在Mac上，使用Safari和導航完美。但是，當我在Chrome/Firefox/IE中打開它時，邊框並不位於導航欄的整個長度。

你可以在這裏看到導航：http://www.tkdqld.xeonweb.com.au

這可能是我的CSS中的一些愚蠢的。我的CSS是低於

#nav { 
    position:relative; 
    text-align:center; 
    width:1155px; 
    height: 36px; 
    margin:auto; 
} 

#nav ul { 
    margin:0; 
    position:absolute; 
} 

/* 1 Level Horizontal Nav */ 

#nav ul li { 
    display: inline; 
    float:left; 
    text-align:center; 
    position: relative; 
    height:36px; 
    padding-right:43px; 
    padding-left:42px; 
    position:relative; 
    border-right:solid 1px #FEE697; 
    border-left:solid 1px #FEE697; 
} 


#nav li a, #nav li a:link { 
    font-family: 'SommetRoundedBold',"Helvetica Neue", Helvetica, Arial; 
    display: block; 
    margin:auto; 
    text-decoration: none; 
    line-height: 22px; 
    text-align:center; 
    position:relative; 
    height:35px; 
    font-size: 18px; 
    outline: none; 
    padding: 9px 0px 0px 0px; 
    color:black; 

} 

#nav ul li:hover { 
    background:#F0E68C; 
    height:35px; 
    width:auto; 

} 

#nav ul li.current { 
    background:#5A1416; 

} 

感謝任何人都可以好心地幫助我，將不勝感激。 乾杯

Answer 1

你有一個靜態的左，右填充每個。不同瀏覽器中的字體略有不同。爲每個嘗試一個固定的寬度。還添加了一個清理邊界的規則。

#nav ul li { 
    display: inline; 
    float: left; 
    text-align: center; 
    position: relative; 
    height: 36px; 
    position: relative; 
    border-right: solid 1px #FEE697; 
    padding-top: 1px; 
    width: 164px; 
} 

#nav ul li:last-child { 
    border-style: none; 
}