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/