223
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 mce_ mce_><!-- 用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 > <span>這裏可以包含其他dom元素</span> <iframe ></iframe> </div>
這樣嵌入了iframe的div就不怕被select劃破了，方法一使用比較簡單，但是應用存在局限，不可能在所有的select元素外添加iframe。方法二有的放矢，在需要的div上麵添加iframe，是常見的解決辦法。
ASP.NET2.0的服務器端控件Menu菜單控件在IE6下渲染的時候，也遇到了select元素無法覆蓋的問題，所以當加載了Menu菜單控件時，會自動注入一個腳本文件，用添加iframe元素的辦法來處理這個bug，當菜單項比較多的時候，這個腳本處理會導致菜單加載時有明顯的延遲，所以這個菜單控件還是不用為妙！
出處：https://blog.csdn.net/boral_li/archive/2009/04/30/4140368.aspx
最後更新：2017-04-02 04:26:01