ie6,ie7下a标签无法点击

来源：互联网发布：网络销售前景怎么样编辑：程序博客网时间：2024/05/22 00:17

前几天在做一个网站的引导页面，因为都是用图片，所以按钮需要用空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);

扩展：

　　在做一个hover下的半透明遮罩层时候遇到的，结构大致如下：

<ul class="clearfix_after">            <li class="hover">              <div class="hover_box">                 <p>文字文字文字文字文字</p>              </div>              <a class="pic" href="" title="">                 <img src="img/pic_17.jpg" width="149" height="192" alt="" />              </a>           </li></ul>

li{    width:149px;    height:192px;    position:relative;    float:left;    margin-right:7px;}.hover_box{    display:none;    position:absolute;    z-index:2;    width:149px;    height:192px;    top:0;    left:0;    filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr='#99000000', endColorstr='#99000000');    background:rgba(0,0,0,0.6);    color:#FFF;    /*background-image:url(about:blank);*/}.hover .hover_box{display:block;}.pic{display:block;position:relative;z-index:1;}.pic img{display:block;}

在IE6下 hover_box的确是半透明了但是在hover_box上却可以点击到下一层的a标签（hover_box下的内容则可以挡住，不会点到a标签）

0 0