CSS 动画按钮问题 - 在悬停动画淡入淡出期间，其余按钮会移动

Question

我正在创建一个垂直导航，并且已经为按钮制作了CSS属性。

悬停属性在以下情况下淡出：

-webkit-transition:all .1s;
-moz-transition:all .1s;
-o-transition:all .1s;
-ms-transition:all .1s;

但是，由于悬停按钮大于静态按钮，因此在动画期间，按钮堆栈会移动。 我能做些什么来阻止这种情况吗？

完整代码如下所示：

<div id="nav">
    <form method="post" action="">
        <a>Home</a>
        <a>link 2</a>
        <a>link 3</a>
    </form>
</div>
#nav {
position:absolute;
margin-top:96px;
margin-left:30px;
height: 450px;
width: 140px;
font-family:"Book Antiqua";}
#nav a {
background:url(Images/Button.png);
height:28px;
width:130px;
font-size:14px;
text-align:center;
color:#C60;
text-decoration:none;
background-position:center;
margin:auto;
display:block;
position:relative;
line-height:190%;
}
#nav a:hover {
background:url(Images/Button%20Hover.png);
height:34px;
width:140px;
font-size:16px;
text-align:center;
color:#C60;
text-decoration:none;
margin:-3px;
z-index:2;
line-height:220%;
text-indent:-10px;
-webkit-transition:all .1s;
-moz-transition:all .1s;
-o-transition:all .1s;
-ms-transition:all .1s;}
#nav a:active {
background:url(Images/Button%20Hover.png);
height:34px;
width:140px;
font-size:16px;
text-align:center;
color:#C60;
text-decoration:none;
margin:-3px;
z-index:2;
line-height:210%;
text-indent:-10px;}

Answer 1

使用

CSS 变换方法，而不是使用 font-size 、 margin 或 line-height 进行缩放：http://jsfiddle.net/tovic/KSZsH/4/