首页 > 其他分享 >a标签position为absolute时,IE无法点击(a position:absolute bug ie)

a标签position为absolute时,IE无法点击(a position:absolute bug ie)

时间:2023-03-27 18:02:06浏览次数:40  
标签:flash height width background position ie absolute


为什么要把a标签搞为absolute呢?很多时候为了覆盖在其他html标签上,实现一些点击,比如一个flash广告,要想在整个flash上加一个链接,单击整块flash链接到某个网页。

 

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

<style>
.flash { width:200px;height;200px;position:relative; }
.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; }
</style>

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

 

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

 

 

解决方法(让a变成块状block):

 

方法1.

 

给a加上一个background属性,写法:

 

background:url(about:blank) 或  background:url(#)

 

 

方法2. (推荐!)

 

给a加任意背景颜色,再把透明度设为透明(隐藏颜色),写法:

 

background:#fff;opacity:0; filter:alpha(opacity=0);

 

 

标签:flash,height,width,background,position,ie,absolute
From: https://blog.51cto.com/u_8895844/6152729

相关文章