填充影響父元素位置的圖像的鏈接

我正在爲我的網站設計一個新設計，以查看我喜歡的內容（觸摸和感覺）。填充影響父元素位置的圖像的鏈接

到目前爲止，我的頂部導航欄非常棒，除了這個問題。

當您將鼠標懸停在僅有文本的鏈接上時，一切都很好。添加頂部填充以使其看起來像導航標籤「移動」/「增長」。

但是，當我將其中一張圖片（Paypal，Twitter，YouTube）懸停在導航鏈接上時，會應用頂部填充，但會影響主要父元素的位置。這是最新版本的Chrome和Firefox的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); 
     }

有沒有什麼方法可以讓我避免這種情況，但仍然有一個「移動」 /「生長」在這些鏈接的效果，以及文本鏈接？在此先感謝。

來源

2013-10-31 RickyAYoder

可以解決高度添加到導航

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

問題

來源

2013-10-31 16:26:14

填充影響父元素位置的圖像的鏈接

回答

相關問題