像素精確定位和不同瀏覽器

我正在用CSS和簡單的無序列表製作一個簡單的水平菜單。菜單的HTML是以下幾點：像素精確定位和不同瀏覽器

<div id="navigation"> 
    <div id="nav-holder"> 
      <ul> 
      <li><a href="#">Home</a></li> 
      <li><a href="#">About</a></li> 
      <li><a href="#">Services</a></li> 
      <li><a href="#">Clients</a></li> 
      <li><a href="#">Portfolio</a></li> 
      <li><a href="#">Contact</a></li> 
     </ul> 
    </div> 
</div>

和CSS如下：

#navigation 
{ 
    display: table; 
    height: 35px; 
    width: 100%; 
    #position: relative; 
    overflow: hidden; 
    background: Black; 
} 

#nav-holder 
{ 
    #position: absolute; 
    #top: 50%; 
    display: table-cell; 
    vertical-align: middle; 
} 

#navigation ul 
{ 
    #position: relative; 
    #top: -50%; 
} 

#navigation ul li 
{ 
    float: left; 
} 

#navigation ul li a 
{ 
    padding: 5px 10px; 
    margin-left: 2px; 
    background-color: Red; 

    text-decoration: none; 
    font-family: Verdana; 
    color: White; 
}

我希望菜單有周圍的所有鏈接元素的2px的餘量。我現在面臨的問題是，雖然它呈現本身罰款在IE中的所有權利的利潤，但Chrome和Firefox這兩種（均爲最新）是具有下列問題：這個問題似乎 Crossbrowser issue