html a标签position为absolute时，IE浏览器无法显示为块

为什么要把a标签搞为absolute呢？很多时候为了覆盖在其他html标签上，实现一些hack点击，比如一个flash广告，要想在整个flash上加一个链接，单击整块flash链接到某个网页，有这么几种办法：

1,flash 文件内置链接，这种办法，修改链接地址非常麻烦，因为你需要修改flash源文件，如果flash应用的很熟练，这不失为一中解决办法，但如果你的flash链接经常换，最好不要用这种办法。

on (release) {
   getURL("http://www.example.com", "_blank");
}

2,通过flash参数动态读取地址，这种办法，比第一种稍好，因为，你可以修改地址：

<object>标签内添加flash变量传递：

<param name="flashVar" value="link_url='http://www.example.com'" />

flash源文件内写上：

on (release) {
   getURL(stage.loaderInfo.parameters["link_url"], "_blank");
}

稍微通用一点，

不过，对于我这种对flash一点都不了解的人来说，上面的办法还是他妈的麻烦，因为我不会修改flash源文件。

所以我的办法就是第三种：

3,用一个绝对定位的a标签覆盖在flash上：

<div class="flash">

           <a class="flash-link"></a>

           <div class="flash-object"><object>....flash嵌入代码</object> </div>

</div>

样式代码：

.flash { position:relative; height : 80px; }

.flash-link { position : absolute; z-index : 2 ;  left: 0; top: 0 ; width: 100%; height: 100%; display: block; }

.flash-object { position : absolute; z-index: 1; left: 0; top: 0; width:300px; height:80px; }

这样，我以为就可以了，Firefox，Chrome， Opera。。。等所有非IE浏览器均可以单击。但IE系列的浏览器却不行，经过仔细测试，发现a标签虽然display为block; 并且拥有width:100%; height:100%;但a这个时候表现的还是像inline元素一样，如果存在文字，则有文字链接，如果不存在，则没有。

不过，如果给a加上一个background属性，颜色或图片都可以，比如：background:#CCC，背景为灰色，A标签立刻表现为一个块装元素，完全遮住了flash。 网上也有很多其他解决的办法，比如用一个透明的gif图片覆盖在a标签上，但我觉得这样的做法额外的消耗了一个服务器链接请求。所以还是用背景颜色代码，把透明度设为0 ：

把.flash-link代码修改为：

.flash-link { position : absolute; z-index : 2 ;  left: 0; top: 0 ; width: 100%; height: 100%; display: block;  opacity:0; filter:alpha(opacity=0);
}

这样A就可以完美的完成了覆盖在Flash上面实现单击链接的使命了。