圖像和鏈接不「對齊」

Question

我有一個奇怪的問題，作爲一個鏈接，其中「可點擊」區域不與圖像本身對齊的圖像。下面是一些影像，讓一個想法，我的意思：

nonclickable http://www.lmnt5.com/01nonclickable.jpgclickable http://www.lmnt5.com/02clickable.jpg

在左邊的電話圖標，光標位置應使連接活躍，但事實並非如此。只有當光標懸停在圖標頂部（以及其上方的區域）時，鏈接纔會激活（如右圖所示）。

因此，在我進入解鎖（或發佈代碼）之前，我想知道是否有人知道什麼可能會造成這種情況。 （如果有任何區別，有三個圖標內嵌[手機，Facebook，Twitter]）。

[編輯：每個請求的代碼]下面是相關的html：

<div id="socialButtonsWrap"> 
<div id="socialButtons" class="socialButtons"> 
<a href="http://www.example.com"><img src="assets/images/badgeFacebook.png" alt="Connect on Facebook"></a> 
<a href="http://www.example.com"><img src="assets/images/badgeTwitter.png" alt="Connect on Twitter"></a> 
<a href="tel:123456789"><img src="assets/images/badgePhone.png" alt="Click to call"></a> 
</div> 
</div><!-- close socialButtonsWrap --> 

和CSS：

#socialButtons { 
float: right; 
width: 20%; 
} 

.socialButtons img { 
position: relative; 
float: right; 
padding: 30px 0 0 15px; 
max-width: 42px; 
max-height: 42px; 
} 

的#socialButtonsWrap唯一進場響應，問題在那裏我之前添加了div。

Answer 1

我試着向.socialButtons img類添加一個z-index：999，它工作。