空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);

*注：推荐使用第一种方法，尽可能少用滤镜