css选项卡栏高度问题

Question

我尝试在悬停状态下实现带有额外填充的选项卡栏。 但问题是悬停状态实际上它移动父div。

你可以看到下面的html;

<div id="statNav"> 
     <a href="#">Gogus</a> 
     <a href="#">Kol</a> 
     <a href="#">Gogus</a> 
     <a href="#">Gogus</a> 
     <a href="#">Gogus</a> 
     <a href="#">Omuz</a> 
     <a href="#">Gogus</a> 
</div> 

and css;

#statNav{ 
    width:100%; 
    border-bottom:2px solid #9B2F2C; 
    overflow:auto; 
} 

#statNav a{ 
    float:left; 
    background-color:#333333; 
    color:white; 
    font-size:12px; 
    font-weight:bold; 
    text-align:center; 
    width:62px; 
    padding-top: 5px; 
    padding-bottom:5px; 
    border-right: 1px solid #777777; 
} 

#statNav a:first-child{ 

    -webkit-border-radius: 5px 0px 0px 0px; 
    border-radius: 5px 0px 0px 0px; 
} 

#statNav a:last-child{ 

    -webkit-border-radius: 0px 5px 0px 0px; 
    border-radius: 0px 5px 0px 0px; 
    border-right:none; 
    width:63px; 
} 

#statNav a:hover{ 

    -webkit-border-radius: 5px 5px 0px 0px; 
    border-radius: 5px 5px 0px 0px; 
    background-color:#9B2F2C; 
    padding-top: 15px; 
} 

这是工作示例;

http://jsfiddle.net/Kg3p4/

我该怎么解决呢？

Answer 1

您可以通过在非徘徊标签利润率和悬停删除它们来对抗增加填充的大小解决这个问题。请注意，边距的大小等于您的悬停和非悬停填充之间的差异。

#statNav a{ 
    margin-top: 10px; 
    padding-top: 5px; 
} 
#statNav a:hover{ 
    margin-top: 0; 
    padding-top: 15px; 
} 

我已更新您的jsFiddle，该解决方案的simple demo。

Answer 2

您可以通过添加一个等于填充差异的负边距底部来修改悬停状态。事情是这样的：

#statNav a:hover{ 

    -webkit-border-radius: 5px 5px 0px 0px; 
    border-radius: 5px 5px 0px 0px; 
    background-color:#9B2F2C; 
    padding-top: 10px; 
    margin-bottom: -5px; 
} 

http://jsfiddle.net/Kg3p4/5/