图片和链接未“对齐”

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 并且它起作用了。