导航栏宽度错误 - 不同浏览器

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