Html 链接可点击区域大于其图像
我已经搜索了很长一段时间，并阅读了许多关于这个话题的其他答案。我有一组图像链接，可点击的区域会过度延伸图像，但只在底部。这些图像是站点标题中的社交图标 网站链接： 样式表： 相关类别：。社交图标Html 链接可点击区域大于其图像,html,css,wordpress,image,hyperlink,Html,Css,Wordpress,Image,Hyperlink,我已经搜索了很长一段时间，并阅读了许多关于这个话题的其他答案。我有一组图像链接，可点击的区域会过度延伸图像，但只在底部。这些图像是站点标题中的社交图标 网站链接： 样式表： 相关类别：。社交图标 我尝试过改变单个图像的浮动、行高度、div容器高度，但都没有效果。为什么链接只在底部过度延伸，我如何防止这种情况发生？这是由默认显示的a标记（display:inline；）造成的 添加此CSS，一切都将正常： .social-icons a { display: inline-block !i
我尝试过改变单个图像的浮动、行高度、div容器高度，但都没有效果。为什么链接只在底部过度延伸，我如何防止这种情况发生？这是由默认显示的
a.social-icons a {
display: inline-block !important; /* !important could be omitted */
}
不能更改内联元素的高度和宽度。通过指定
display:inline block对象的高度
向社交图标添加规则：
display: inline-block;
height: 1em;
该解决方案有点老套，但添加以下内容将强制切断容器外的任何内容，并考虑水平切断：
.social-icons a{
overflow:hidden;
padding-left:0.1vw;
padding-right:0.1vw;
}
希望这对其他人有所帮助。不会改变Chrome 35.0.1916.153中的任何内容。为什么你期望它会这样？@Perpatim是对的-我也没有改变，在Chrome 35.0.1916.153上。你是不是想同时改变显示：内联块
和高度
属性？这也不起作用-悬停在Firefox 29.0.1中表现正常，但在上面的Chrome版本&Safari 7.0.5（9537.77.4）中表现不正常。图标类本身可能有问题吗？