html - 无序列表导航 - 悬停元素向左移动 1px

Question

我有这样的无序列表导航。当 anchor 悬停时，导航列表向左移动 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 .