div遮盖select的解决方案(简单)

最新推荐文章于 2022-02-23 13:48:58 发布

Jiao2_vc

最新推荐文章于 2022-02-23 13:48:58 发布

阅读量1.1k

点赞数

分类专栏：基础（常用函数）以及需要注意的地方文章标签： div iframe 框架 ie object html

基础（常用函数）以及需要注意的地方专栏收录该内容

31 篇文章

订阅专栏

IE6以及一下版本下，选择框Select会覆盖Div中的内容
一般情况下，可以将显示的内容放到Iframe中，然后再显示框架内的内容。由于Iframe的可以显示在Select上层，就可以解决这个问题。不过这样做在实现上比较麻烦。

有个解决的部分就是在Div内容中加入不显示的Iframe框架即可，不用修改其他内容。加了句这个：

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

本文来自优快云博客，转载请标明出处：http://blog.youkuaiyun.com/URL/archive/2005/04/27/365525.aspx