解决a标签为空IE浏览器无法显示

作者:沙师弟时间:2012-06-27
最近给项目做一个可以切换的幻灯片,但是要求有用两个空的a标签用绝对定位来摆放,相信有很多人一定用过这样的效果,但是当a标签为空且没有背景,问题就来了IE浏览器下,a标签表现成display:inline,不管给它怎么设置z-index还是display:block都不显示。 我的css代码是这样的:
.indexBanner1{width:390px;height:613px;position:absolute;top:0;display:block}
	.indexBanner1-item1{left:0}
	.indexBanner1-item2{right:0}
html标签是这样的:
<a href="?m=photo&id=indexBanner1-sub1" class="indexBanner1 indexBanner1-item1"></a>
<a href="?m=product&cid=1" class="indexBanner1 indexBanner1-item2"></a>
按照w3c标准这样写是没有写是没有错的,但是我要理解变态的IE,它将空的A标签且设置了position:absolute而没有背景理解为A标签不存在。。。 解决这个问题,要在A标签添加一个背景,我是这样写CSS的:
.indexBanner1{width:390px;height:613px;position:absolute;top:0;display:block;background:#fff;opacity:0;filter:alpha(opacity=0);}
	.indexBanner1-item1{left:0}
	.indexBanner1-item2{right:0}