解決:IE6下,div被下拉框所遮擋的問題
阿新 • • 發佈:2019-01-28
工作中遇到一個問題單,系統在IE6下面,部分展示不正確,IE8下展示正確。如圖:
之前分析原因有點繞路了。後來經同事指點是因為IE6下面下拉框的問題。
IE6下面select算是什麼視窗級別的,不能被div所覆蓋,z-index不起作用,所以出現這個問題。
解決方法關鍵在於iframe可以覆蓋select,而div又可以覆蓋iframe,so:
1.把select都用iframe包起來。不知道展示會不會出現問題,當時感覺這麼多select,明顯不可取。還有就是,展示的時候給select都display = "none"掉,完了再展示出來。
我估計到時候測試又會提單,什麼什麼的時候下拉框看不見了。。。所以採用第二種方法。
2.以Iframe作為div的子元素,覆蓋select元素。
div浮層的內容大概結構如下
<div> <table>...........</table><div>
對展示這一塊不是很熟悉,當時也走了很多彎路,以為用iframe包裹起來要展示的內容。
應該是新增一個iframe,使其z-index 為-1,和後面要展示的table是同級別的。
把後面要展示的table放到一個div裡面使其z-index為正數,就能展示到iframe上面了,這樣間接就給select遮蓋了。
還要設定好left top,width等細節。但是主要想法已經實現了。
最後的結構如下:
<div><iframe style="z-index:-1"...></iframe><div style="z-index:1"><table>......</table></div></div>