无序列表导航 - 悬停元素向左移动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 {
    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

Answer 2

尝试：

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

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