IE里z-index的另一个BUG

IE的z-index的BUG已经够多了，结果今天在做图集的时候，偶然又遇到了一个。

 

<style type="text/css"> a.left_btn{ width:200px; height:150px; position:absolute; left:0; top:0; z-index:10;} a.left_btn:hover{ background:#666;} a.right_btn{ width:200px; height:150px; position:absolute; left:200px; top:0; z-index:10;} a.right_btn:hover{ background:#666;} </style> <div style="position:relative;" mce_style="position:relative;"> <div style="position:absolute; width:400px; height:150px; z-index:5;"> <img src="http://www.baidu.com/img/baidu_sylogo1.gif" mce_src="http://www.baidu.com/img/baidu_sylogo1.gif" style="width:400px; height:150px;" /> </div> <a href="javascript:void(0);" mce_href="javascript:void(0);" onclick="return false;" class="left_btn"></a> <a href="javascript:void(0);" mce_href="javascript:void(0);" onclick="return false;" class="right_btn"></a> </div>

 

这代码在一张图片的上方覆盖了2个链接，一个在图片的左半侧，一个在图片的右半侧，鼠标移到图片左边，触发a.left_btn:hover，用来显示向左翻页的图片，鼠标移到图片右边显示向右翻页的图片。

 

代码在FF里完全正常，但在IE里，2个链接却都不见了。如果图片比较小的话倒是可以冒出来。但图片大小比链接更大时，链接就丢了。

 

原因似乎是IE对空标签的z-index理解有问题。

 

解决方法是，给链接加上内容

 

但是加字的话，将会遮住图片，而且鼠标也必须移动到文字上才能触发链接。

另一个办法是给链接里塞一张透明的图片来占位。

 

但最优的解决方法是，直接给链接设置空背景链接

 

最后代码如下：

 

<style type="text/css"> a.left_btn{ background:url(about:blank); width:200px; height:150px; position:absolute; left:0; top:0; z-index:10;} a.left_btn:hover{ background:#666;} a.right_btn{ background:url(about:blank); width:200px; height:150px; position:absolute; left:200px; top:0; z-index:10;} a.right_btn:hover{ background:#666;} </style> <div style="position:relative;" mce_style="position:relative;"> <div style="position:absolute; width:400px; height:150px; z-index:5;"> <img src="http://www.baidu.com/img/baidu_sylogo1.gif" mce_src="http://www.baidu.com/img/baidu_sylogo1.gif" style="width:400px; height:150px;" /> </div> <a href="javascript:void(0);" mce_href="javascript:void(0);" onclick="return false;" class="left_btn"></a> <a href="javascript:void(0);" mce_href="javascript:void(0);" onclick="return false;" class="right_btn"></a> </div>