工作中遇到一個(gè)問題單,系統(tǒng)在IE6下面,部分展示不正確,IE8下展示正確。如圖:
之前分析原因有點(diǎn)繞路了。后來經(jīng)同事指點(diǎn)是因?yàn)镮E6下面下拉框的問題。
IE6下面select算是什么窗口級(jí)別的,不能被div所覆蓋,z-index不起作用,所以出現(xiàn)這個(gè)問題。
解決方法關(guān)鍵在于iframe可以覆蓋select,而div又可以覆蓋iframe,so:
1.把select都用iframe包起來。不知道展示會(huì)不會(huì)出現(xiàn)問題,當(dāng)時(shí)感覺這么多select,明顯不可取。還有就是,展示的時(shí)候給select都display = "none"掉,完了再展示出來。
我估計(jì)到時(shí)候測(cè)試又會(huì)提單,什么什么的時(shí)候下拉框看不見了。。。所以采用第二種方法。
2.以Iframe作為div的子元素,覆蓋select元素。
div浮層的內(nèi)容大概結(jié)構(gòu)如下
<div> <table>...........</table><div>
對(duì)展示這一塊不是很熟悉,當(dāng)時(shí)也走了很多彎路,以為用iframe包裹起來要展示的內(nèi)容。
應(yīng)該是添加一個(gè)iframe,使其z-index 為-1,和后面要展示的table是同級(jí)別的。
把后面要展示的table放到一個(gè)div里面使其z-index為正數(shù),就能展示到iframe上面了,這樣間接就給select遮蓋了。
還要設(shè)置好left top,width等細(xì)節(jié)。但是主要想法已經(jīng)實(shí)現(xiàn)了。
最后的結(jié)構(gòu)如下:
<div><iframe style="z-index:-1"...></iframe><div style="z-index:1"><table>......</table></div></div>
聯(lián)系客服