無序列表導航 - 懸停元素移動1px左

Question

我有這樣的無序列表導航。當錨點懸停時，導航列表左移1px。 如何解決這個問題？

這裏是我的代碼

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

這裏是我的CSS：

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

的透明邊框抵消了新的邊界填充的空間。你也可以做padding: 1px。

jsFiddle。