解决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更高的优先级失效了。

阅读更多
个人分类: Web
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

不良信息举报

解决div层被select下拉框遮盖的问题

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭