空a標籤 a標籤空的狀況下 IE6 IE7下點擊無效

最近作了好多網站專題頁面，由於專題頁面圖片較多，個別banner上有1個到多個按鈕，一種是用「圖解img標籤的usemap」的方法作連接，（圖解img標籤的usemap使用方法）[傳送門] 另外一種用則須要用空a標籤來作，發現「a標籤」在IE6與IE7中點擊無效中點擊不了（「a標籤」定義寬度和高度IE瀏覽器爲零0），其餘瀏覽器都正常（若是不正常請加「display:bolck;」（←推薦）或「float:left;」）。

 

代碼大體以下：

 

 

 

<div class="large_banner">
<img src="images/banner.jpg" width="966" height="471" />
<div class="button"><a href="#"></a></div>
<div class="nr">空a標籤 a標籤空的狀況下 IE6 IE7下點擊無效</div>
</div>

 

樣式：

.large_banner{  overflow:hidden; position:relative;}

.large_banner .nr { width:600px; height:76px; z-index:2; bottom:30px; right:30px;position:absolute; }

.large_banner .button { width:123px; height:37px; z-index:3; bottom:150px; right:114px; position:absolute;}

.large_banner .button a { float:left; width:123px; height:37px;background:url(about:blank);}

 

 

//簡單的寫就是：

 

 

<div class="large_banner">
<img src="images/banner.jpg" width="966" height="471" />
<a href="#"></a>
</div>    

 

 樣式：

.large_banner{  overflow:hidden; position:relative;}

.large_banner a { float:left; width:123px; height:37px;background:url(about:blank);  bottom:150px; right:114px; position:absolute; }

 

 

//ps頁面浮動過多部要建議把 float:left; 替換成 display:block; 

 

兩種解決方法（主要是針對a標籤不能設置背景狀況）：

        一、給a標籤添加樣式：background:url(about:blank);

        二、給a標籤隨便添加背景色或者背景圖片，而後將a標籤的透明度設置爲0，不過在IE中須要使用濾鏡，即 opacity:0;filter:alpha(opacity=0);

*注：推薦使用第一種方法，儘可能少用濾鏡