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 plaincopy to clipboardprint?

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 plaincopy to clipboardprint?

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