픽셀 정밀 위치 지정 및 다른 브라우저

CSS와 간단한 정렬되지 않은 목록으로 하나의 간단한 수평 메뉴를 만들고 있습니다.픽셀 정밀 위치 지정 및 다른 브라우저

<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는 다음과 같습니다 : 메뉴의 HTML은 다음됩니다

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

나는 메뉴가 링크의 모든 요소 주위에 2 픽셀 마진을 갖고 싶어. 내가 직면하고 문제는 그 그것은 권리 마진을 제외한 모든 크롬과 파이어 폭스 (모두 최신입니다) 다음과 같은 문제가 발생하는 모두와 IE에서 잘 자체를 렌더링하는 동안 : Crossbrowser issue