为什么<a>标签位于屏幕上的<img>（仅适用于Firefox 4 + Chrome！）

问题描述：

我不确定这是否是最新的Firefox和Chrome中的毛刺/怪癖，但我有<img>标签已被<a>标签封装以将图像变成链接。为什么<a>标签位于屏幕上的<img>（仅适用于Firefox 4 + Chrome！）

问题在于链接的点击框位于图像下方。图像也是可点击的，但图像下的死区也是可点击的。

<img>有一个左边界和底部边界规则适用于它，我认为是什么导致了这个问题，但我不明白为什么......我也尝试使用明确的</img>结束标签，因为没有'也不能解决问题。

Internet Explore 8按预期工作！不显示下面的问题。它显示图像下方的框，但IE8中无法点击死区。我认为这应该起作用。

这里是为了澄清我的意思是图像：

我刚刚加入了一条边境的一切<a>标签。

而这里的代码...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
<style type="text/css"> 
    a 
    { 
     text-decoration: none; 
     border: 1px solid #F00; 
    } 

    #testimg  { 
     margin-left: 20%; 
     margin-bottom: 25px; 
    } 
</style> 
</head> 
<body> 
<div><a href="#"><img id="testimg" alt="" src="imgs/landing/popup_sendbtn.png" /></a></div> 
</body> 
</html>

这是推动我疯了！任何帮助，将不胜感激。

http://jsfiddle.net上的一个实例将会很棒。 – BoltClock 2011-04-12 05:19:59

答

<img>下方的可点击区域是文本内容应该放在<a>元素中的位置。

如果您只希望图片区域可点击，请给您的<a>设置相同的宽度和高度，将其设置为display: block，然后将边距移至<a>。

a { 
    display: block; 
    width: /* width of your image */; 
    height: /* height of your image */; 
    text-decoration: none; 
    margin-left: 20%; 
    margin-bottom: 25px; 
    border: 1px solid #F00; 
}

这是一个利润率问题，而不是内联元素。即使它是内联的，它也会展开为包装图像的大小。 – Headshota 2011-04-12 05:24:17

@Headshota：是的，我开始感到困惑，但我尽可能快地解决了我的问题。哎呀。 – BoltClock 2011-04-12 05:25:40

谢谢！将边距移动到''标签并添加'display：block'就行了。 – Brownbay 2011-04-12 05:45:37

答

您在img中有余量。将它们移动到一个标签，它可能会修复它。

为什么标签位于屏幕上的（仅适用于Firefox 4 + Chrome！）

相关推荐