在带有影响父元素位置的图像的链接上填充

Question

我正在为我的网站设计一个新的设计，看看我喜欢什么（触摸和感觉）。

到目前为止，我的顶部导航栏很棒，除了这个问题。

当您将鼠标悬停在仅包含文本的链接上时，一切都很好。添加了顶部填充，使其看起来像导航选项卡"移动"/"增长"。

但是，当我将鼠标悬停在包含我的一张图像（PayPal、Twitter、YouTube）的导航链接上时，会应用顶部填充，但它会影响主父元素的位置。这是最新版本的Chrome和Firefox for Windows 7。

BODY 不是受影响的父级，但 #main（如我的 CSS 中所定义）也会"移动"/"增长"。

网址 http://rickyyoder.x10.mx/new/，代码如下：

   #main{
        width:94%;
        max-width:880px;
        margin:12px auto;
        background:#fff;
        box-shadow:1px 1px 4px #000;
        border-radius:4px;
        padding:2px 2px 8px 2px;
        }
        #nav{
        position:relative;
        top:-0.8em;
        background:#fff;
        border-radius:4px;
        padding:2px;
        display:inline-block;
        }
        #nav a{
        color:#000;
        display:inline-block;
        padding:1px 1em 1px 1em;
        border-radius:0 0 4px 4px;
        box-shadow:0px 2px 2px -2px #fff inset, 0px -4px 16px -6px #aaa inset;
        -webkit-transition:background 0.5s, padding-top 0.25s;
        -moz-transition:background 0.5s, padding-top 0.25s;
        vertical-align:top;
        }
        #nav a:hover{
        padding-top:4px;
        background:#eee;
        }
        #nav a:hover img{
            -webkit-transition:-webkit-filter 1.5s;
        }
        #nav a:hover img{
            -webkit-filter:hue-rotate(360deg);
        }

有什么方法可以避免这种情况，但仍然对这些链接以及文本链接产生"移动"/"增长"效果？提前谢谢。

Answer 1

您可以解决向导航添加高度的问题

#nav {
position: relative;
top: -0.8em;
background: #fff;
border-radius: 4px;
padding: 2px;
display: inline-block;
height: 50px;
}