IE6 Select元素无法被div等元素覆盖的bug解决办法

在页面设计时,经常会使用div制作蒙版或模拟弹出窗口,但在IE6下,当div下方有下拉列表框select元素的时候,下拉列表框会划破div显示在div之上,不论z-index设为何值均会出现此问题,可能由于下拉列表控件的弹出式下拉列表的原因导致Z轴高度失控。但是IE6有一个神奇的逻辑,div 无法覆盖select,但是iframe 可以覆盖select,而div可以覆盖iframe,所以解决办法就是用Z轴高度更高的Iframe元素,包裹或覆盖住下拉列表框控件,使其回到正常的Z轴高度上来!
解决办法一:Iframe包裹select元素

 

<iframe style="z-index:1" mce_style="z-index:1" style="z-index:1" mce_style="z-index:1"><!-- 用iframe 解决此bug --> <select name="country"> <option value="1">china</option> <option value="2">japanese</option> <option value="1">U.S.A</option> </select> </iframe>  

 

解决办法二:以Iframe作为div的子元素,覆盖select元素

 

.T_iframe { position: absolute;/*绝对定位保证iframe不会占用流布局空间*/ width: 100%; /*100%保证可以覆盖整个div*/ height: 100%; z-index:-1; /*-1保证iframe显示在div下方*/ } .T_div { position: absolute; left:100px; top:50px; width: 300px; height: 200px; background : blue; z-index:100; } <div class="T_div"> <span>这里可以包含其他dom元素</span> <iframe class="T_iframe"></iframe> </div> 

 

这样嵌入了iframe的div就不怕被select划破了,方法一使用比较简单,但是应用存在局限,不可能在所有的select元素外添加iframe。方法二有的放矢,在需要的div上面添加iframe,是常见的解决办法。

      ASP.NET2.0的服务器端控件Menu菜单控件在IE6下渲染的时候,也遇到了select元素无法覆盖的问题,所以当加载了Menu菜单控件时,会自动注入一个脚本文件,用添加iframe元素的办法来处理这个bug,当菜单项比较多的时候,这个脚本处理会导致菜单加载时有明显的延迟,所以这个菜单控件还是不用为妙!

 

出处:http://blog.csdn.net/boral_li/archive/2009/04/30/4140368.aspx

上一篇:magento -- 前台在一站多店之间切换的代码片段


下一篇:Magento开发手册中文版第一章