解決div層被select下拉框遮蓋的問題
阿新 • • 發佈:2019-02-09
在IE裡,層DIV被下拉框SELECT遮蓋,這是IE的bug之一,原因在於select的優先級別比div高。因此無論如何用css屬性z-index設定都沒用。
所以,解決的辦法有兩種
- 在顯示div的時候隱藏所有select
- 讓div裡的內容比select的優先順序還要高
第一種方法顯然比較麻煩,特別是當select比較多且位置不固定的時候,很容易將不該隱藏的也隱藏了。
第二鍾辦法更好一些。常用的優先順序比select高的HTML控制元件有object和iframe,我選用了iframe比較好。
原理就是在div種加入一個iframe,然後把需要顯示的內容write到iframe的body中。
參考程式碼如下:
var oIframe = document.createElement("<iframe name=/"oIframeFilter/" frameborder=/"0/"></iframe>")
if (oDivFilter.children.length != 0) oDivFilter.removeChild(oDivFilter.children(0));
oDivFilter.appendChild(oIframe);
window.frames[oIframe.name].document.write("<link rel=/"stylesheet/" href=/"/style/css.css/" type=/"text/css/">");
sBody = "<table><tr><td>哈哈哈哈</td></tr></table>";
window.frames[oIframe.name].document.write(sBody);
此外,還需要注意iframe的屬性allowTransparency就不能再用了,因為透明就讓iframe更高的優先順序失效了。