kongjiea笔记

热爱前端的家伙...

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

问题环境描述


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




阅读更多
个人分类: css
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

不良信息举报

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

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭