链接比图片大的可点击区域

Posted 2023-03-05

【中文标题】链接比图片大的可点击区域

【英文标题】：Link clickable area larger than its image

【发布时间】：2014-09-10 19:49:55

【问题描述】：

我已经搜索了很长时间，并阅读了有关此主题的许多其他答案。我有一组图像链接，可点击区域过度扩展图像，但仅在底部。图片是网站标题中的社交图标。

网站链接：http://brendanbikes.org/

样式表：http://brendanbikes.org/wp-content/themes/casper-wp-master/style.css?ver=3.9.1

相关类：.social-icons

我尝试过更改单个图像的浮动、行高、div 容器高度，但均无济于事。为什么链接只在底部过度延伸，如何防止这种情况发生？

【参考方案1】：

这是由a 标签的默认显示引起的（display: inline;）。

添加这个 CSS，一切都会好起来的：

.social-icons a 
    display: inline-block !important; /* !important could be omitted */

【讨论】：

不会更改 Chrome 35.0.1916.153 中的任何内容。你为什么期望它？

@Palpatim 是对的 - 在 Chrome 35.0.1916.153 上对我来说也没有变化。

您的意思是同时更改display: inline-block 和height 属性吗？

【参考方案2】：

您不能更改内联元素的高度和宽度。通过指定display: inline-block，您可以调整.social-icons a 对象的height：

添加到.social-icons a 规则：

display: inline-block;
height: 1em;

【讨论】：

这也不起作用 - 悬停在 Firefox 29.0.1 中表现正常，但在上述 Chrome 版本和 Safari 7.0.5 (9537.77.4) 中表现不佳。图标类本身可能有问题吗？

【参考方案3】：

解决方案有点老套，但添加以下强制切断容器外的任何东西，并考虑水平切断：

.social-icons a
    overflow:hidden;
    padding-left:0.1vw;
    padding-right:0.1vw;

希望这对其他人有所帮助。