정렬되지 않은 목록 탐색 - 이동 된 요소 이동 1px 왼쪽

Question

나는 이와 같은 목록 탐색을 정렬하지 않았습니다. 앵커를 올리면 탐색 목록이 1 픽셀 왼쪽으로 이동합니다. 어떻게 해결할 수 있습니까?

ul#nav li { 
    float: left; 
    margin: 0; padding: 0; 
} 

ul#nav li a:hover { 
    -moz-border-radius:3px; 
    border: 1px solid #ccc; 
} 

Answer 1

시도 :

ul#nav li a { 
    border: 1px solid transparent; 
} 

ul#nav li a:hover { 
    -moz-border-radius:3px 
    border:1px solid #cc 
} 

Answer 2

ul#nav li { 
    float: left; 
    margin: 0; 
} 

ul#nav li a { 
    border-width: 1px; 
    border-style: solid; 
    border-color: transparent;  
} 

ul#nav li a:hover { 
    border-color: #ccc; 
} 

투명 테두리 새로운 국경을 설정해 공간을 상쇄 :

여기 여기 내 CSS를 내 코드

<ul id="nav"> 
    <li><a href="#">First</a></li> 
    <li><a href="#">Second</a></li> 
    <li><a href="#">Third</a></li> 
</li> 

입니다. padding: 1px도 할 수 있습니다.

jsFiddle.