解决IE6中层被下拉框盖住的bug问题

在网页中，每个元素都有自己的默认层级定义，正因为这些关系，元素才有显示层次的区分，当然也可以利用CSS中?的z-index属性来改变元素的默认层级关系。 由于不同浏览器对层次关系的解释不同，会造成浏览器之间的显示差别，出现bug，比如IE6、IE7和Firefox之间，所以要想些办法修正这些差别，达到统一效果。 常见的层级bug有层被下拉框盖住的bug、flash文件始终在最顶层等等很多，本篇文章先讲解如何解决IE6中层被下拉框盖住的bug。 IE6中层被下拉框盖住的bug究竟是什么样子的？请看以下代码：

将以上代码粘贴到网页中，使用IE7和Firefox浏览器查看均无异样，但使用IE6查看时效果却如图一所示。虽然名为tags_box的div已经声明z坐标的值为999，但在IE6下仍然被选择框的下拉菜单遮挡住了，造成这个问题的原因是IE6将选择框的默认层级视为最高级，所以将tags_box盖住。 要解决这个问题，只改变z-index的值是达不到效果的，但是，可以找到和选择下拉框同样被IE6误认为最高等级的另一元素——iframe解决它。具体方法是在tags_box这个div中插入一个iframe，并让它的的透明度为0，看起来好像不存在一样。代码如下：

<div style="position:absolute;z-index:-1;left:-1px;top:0;width:200px;"> <iframe style="background:#F0F9FB;width:100%;height:110px;filter:alpha(opacity=0);-moz-opacity:0"></iframe> </div><!--解决IE6中层无法挡住下方选择框的错误-->

只要将以上代码复制到tags_box的div中即可，在IE6中的预览效果应如图二中所示。

（编辑：核心网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!