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元素

 

view plain copy to clipboard print ?

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

 

 

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

 

view plain copy to clipboard print ?

1. .T_iframe  
2. {  
3.     position: absolute;/*绝对定位保证iframe不会占用流布局空间*/  
4.     width: 100%;    /*100%保证可以覆盖整个div*/  
5.     height: 100%;  
6.     z-index:-1; /*-1保证iframe显示在div下方*/  
7. }  
8. .T_div  
9. {  
10.     position: absolute;  
11.     left:100px;  
12.     top:50px;  
13.     width: 300px;  
14.     height: 200px;  
15.     background : blue;    
16.     z-index:100;  
17. }  
18. <div class="T_div">  
19.      <span>这里可以包含其他dom元素</span>  
20.      <iframe class="T_iframe"></iframe>  
21. </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