关于在IE中a标签设置绝对定位和宽高之后却点击没有反应的解决方案

最近做了一个页面，是一张大的背景图，在背景图上面有几个表单元素，代码结构大致如下：

 

  <div class="huishi" id="form1" style="background:url(images/huishi_bg.png) no-repeat;">
    <input type="text" value="" name="year"  id="year"/>
    <input type="text" value="" name="month"  id="month"/>
    <input type="text" value="" name="day"  id="day"/>
  </div>

DIV使用相对定位，表单元素使用绝对定位。
后来产品希望背景图能点击，于是在在背景图上面加了一个超链接a，代码如下：

 

 

  <div class="huishi" id="form1" style="background:url(images/huishi_bg.png) no-repeat;">
  <a href="http://www.baidu.com/" target="_blank" style="display:block; width:555px; height:395px; position:absolute; left:0; top:0; z-index:0;"></a>
    <input type="text" value="" name="year"  id="year"/>
    <input type="text" value="" name="month"  id="month"/>
    <input type="text" value="" name="day"  id="day"/>
  </div>

后来测试发现在IE下面点击无响应。其它浏览器没事。

 

在试验了无数种方式之后，还是不行，最后求助于百度，于是找到了答案。

以下是从网上摘录下来的部分，为了防止以后再遇到此类问题，也为了怕自己忘记，特此记录一下。

 

造成问题的原因如下：

元素绝对定位以后设置了高宽等原因：

1、元素内并无内容
2、背景是透明的，无任何背景图或者颜色

解决方法：


1、如果不是绝对定位元素的，可以用相对定位
2、给元素加透明的背景图，或者给元素加背景颜色，然后设置透明度为0
3、IE可以只用 background:url(about:blank) 解决


第三种方法平时用用是可以的，但是在某种情况下会有bug, 比如JS拖动层时候，拖动的
事件在一个透明层上面，你有设置了其他鼠标光标，这时候拖动就会出现光标闪烁的现象！

这里建议第二种方法，弄一个1*1PX的透明图就好！