a标签在 position:absolute 后无法点击的问题

css

将 a 的 position 指定为 absolute,指定 display:block,指定 width、height,则 IE 中 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>

</head>

<body>

<a href="http://www.9696e.com/" style="position:absolute; top:0px; padding:0px; display:block; border:1px solid red; width:200px; height:100px;">这几个文字可以点,但红色框内的其他区域不可点</a>

</body>

</html>

是什么原因导致a标签在 position:absolute 后无法点击的问题呢?

这是由于在 IE 中a 的无内容区域,被当作是穿的,就像一个镂空的框一样,鼠标移上去是点不到东西的。

解决方案

  • 指定 body { height:100%; }
  • 给 a 指定 background,颜色、图片都可以,但一般是指定一张透明的背景图片。

转载请注明来源:新一 » a标签在 position:absolute 后无法点击的问题

赞 (2) 评论 (0) 分享 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址