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);