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