问题环境描述
如图就是简单的一张图片,x的关闭按钮是用i标签来布局实现的, 代码如下:
html:
<div class="innerWrap">
<i class="closeBtn" id="closeBtn" title="关闭">关闭</i>
<img src="/yxhtWeb/images/social_responsibility/social_responsibility_13pop.png" width="500">
</div>
css:
.popBox_13{position:absolute;z-index:1003;top:50%;left:50%;margin:-310px 0 0 -380px;}
.popBox_13 .innerWrap{position:relative;overflow:hidden;}
.popBox_13 .innerWrap .closeBtn{display:block;overflow:hidden;text-indent:-99999px;position:absolute;z-index:1003;top:0;right:0;width:52px;height:52px;cursor:pointer;}
js:
$('.popBox_13 .closeBtn').click(function(){
$('#mask').hide();
$('.popBox_13').hide();
});
在高级浏览器 点击关闭按钮是正常的,但是在ie7/8下就有问题,无法关闭
解决办法有2种:
1、给a标签添加样式:background:url(about:blank);
2、给a标签随便添加背景色或者背景图片,然后将a标签的透明度设置为0,不过在IE中需要使用滤镜,即 opacity:0;filter:alpha(opacity=0);