图像和链接没有“对齐”

Question

我遇到一个奇怪的问题，即用作链接的图像，其中“可点击”区域与图像本身不对齐。这里有一些图片来说明我的意思：

nonclickable http://www.lmnt5.com/01nonclickable.jpg clickable 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

我尝试将z-index：999添加到.socialButtons img类中，但它确实有效。