关闭

css在用空元素、无内容的元素布局不兼容ie7/8

897人阅读 评论(0) 收藏 举报
分类:

问题环境描述


如图就是简单的一张图片,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);




0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:1590584次
    • 积分:11572
    • 等级:
    • 排名:第1319名
    • 原创:202篇
    • 转载:74篇
    • 译文:0篇
    • 评论:108条
    友情链接
    最新评论