小虾虎鱼

小虾虎鱼

空a标签在IE中点击无效

作者 禾惠 发表于 2012/09/15,最后修改于 2012/09/15

        前几天在做一个网站的引导页面,因为都是用图片,所以按钮需要用空a标签来做,发现a标签在IE6与IE7中点击无效中点击不了,其他浏览器都正常。一开始以为是z-index的问题,但不论z-index设置多大依然还是无效。代码大致如下:

<a style="position:absolute; top:0; left:0; display:block; width:100px; height:50px;" href="#"></a>

        给a标签添加文字后,发现只有鼠标放到文字上会成手型(说明能点击),而放到文字外面却不是手型,无论a标签的宽高有多大都不行。于是随意给a标签添加了一个background意外的发现鼠标在非文字区域(但在a标签里面)也能成手型,然后尝试将文字去掉依然可以成手型,于是也就找到了问题之所在了。


最后得出了结论:

        如果给空a标签定义了宽度和高度且使用了absolute,则在IE6和IE7中点击无效。


也找到了两种解决方法(主要是针对a标签不能设置背景情况):

        1、给a标签添加样式:background:url(about:blank);

        2、给a标签随便添加背景色或者背景图片,然后将a标签的透明度设置为0,不过在IE中需要使用滤镜,即 opacity:0;filter:alpha(opacity=0);

推荐使用第一种方法,尽量少用滤镜