html - 图片和链接不是 "aligned"

Question

我遇到一个奇怪的问题，图像用作链接，其中“可点击”区域未与图像本身对齐。这里有一些图片可以让您了解我的意思:

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

在左侧的电话图标中，光标的位置应该使链接处于事件状态，但事实并非如此。只有当我将光标悬停在图标顶部(以及紧靠其上方的区域)时，链接才会变为事件状态(如右图所示)。

因此，在我开始调试(或发布代码)之前，我想知道是否有人清楚地知道可能导致此问题的原因。 (如果有任何区别，内联有三个图标 [phone, 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 类中，它起作用了。