1. 程式人生 > >解決div層被select下拉框遮蓋的問題

解決div層被select下拉框遮蓋的問題

在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更高的優先順序失效了。