ie6,ie7下a標籤無法點擊

 前幾天在做一個網站的引導頁面，因爲都是用圖片，所以按鈕需要用空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標籤）