html a标签position替absolute时,IE浏览器无法显示为块
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上面实现单击链接的使命了。
为什么要把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上面实现单击链接的使命了。