在頁面設計時,經常會使用div製作蒙版或模擬彈出窗口,但在IE6下,當div下方有下拉列表框select元素的時候,下拉列表框會劃破div顯示在div之上,不論z-index設爲何值均會出現此問題,可能由於下拉列表控件的彈出式下拉列表的原因導致Z軸高度失控。但是IE6有一個神奇的邏輯,div 無法覆蓋select,但是iframe 可以覆蓋select,而div可以覆蓋iframe,所以解決辦法就是用Z軸高度更高的Iframe元素,包裹或覆蓋住下拉列表框控件,使其回到正常的Z軸高度上來!
解決辦法一:Iframe包裹select元素
解決辦法二:以Iframe作爲div的子元素,覆蓋select元素
這樣嵌入了iframe的div就不怕被select劃破了,方法一使用比較簡單,但是應用存在侷限,不可能在所有的select元素外添加iframe。方法二有的放矢,在需要的div上面添加iframe,是常見的解決辦法。
ASP.NET2.0的服務器端控件Menu菜單控件在IE6下渲染的時候,也遇到了select元素無法覆蓋的問題,所以當加載了Menu菜單控件時,會自動注入一個腳本文件,用添加iframe元素的辦法來處理這個bug,當菜單項比較多的時候,這個腳本處理會導致菜單加載時有明顯的延遲,所以這個菜單控件還是不用爲妙!