当前位置：首页 → 问答吧 → 链接a内部的block元素设置宽或高后无法响应点击

链接a内部的block元素设置宽或高后无法响应点击

时间：2010-09-20

来源：互联网

当在链接a内部某个元素的display为block值时，并且其包含img元素，那么该块状元素将无法响应a点击。如果该块状元素不包含img元素或者是包含文本元素，就可以响应链接a点击。

浏览器测试
IE浏览器(IE6/IE7)会出现这种情况，FF、Chrome、IE8下则不会出现。（还是看例子吧）

解决方案就是修改display属性值为inline-block。但是display:block时无法响应点击的原因不知，求解。

HTML代码示例

复制内容到剪贴板

代码:

<!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=gb2312" /> <title>无标题文档</title> </head> <body> <a href="http://www.blueidea.com" target="_blank"> <span style="display:block;width:276px;height:110px;"> <img src="http://www.google.com.hk/intl/zh-CN/images/logo_cn.png" /> </span> </a> </body> </html>
提示：您可以先修改部分代码再运行

作者: YstarLongzi 发布时间: 2010-09-20

非常怪异，去掉宽度和高度也能恢复正常，没遇到过，期待解答

作者: geminids 发布时间: 2010-09-20