解决DIV层被Select覆盖的问题

参考一下资料:

1. http://blog.csdn.net/URL/archive/2005/04/27/365525.aspx

2. http://www.leeyupeng.com/?p=258

综合这两篇文章的内容,可以很轻易的解决上述问题.



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

Trackback: http://tb.blog.csdn.net/TrackBack.aspx?PostId=365525



由于IE存在一个bug，会使得DIV层无法遮盖select控件。
我今天说的解决方法是用iframe找到的。其实这个问题的解决方法我今天在网上搜也会很多，不过大部分都是直接用html来实现的。但在实际应用中，我们会更倾向与用js动态生成对象来进行封装。

首先这个实现方式是从google-suggest那得到的启发，起初看suggest的js代码的时候，发现它里面用到了iframe，但是不清楚和div究竟是怎么关联上而又不互相影响的。昨天突然想到可以用selenium的viewdom模块看到其生成的dom对象是如何的，后来发现，suggest是通过两个div来实现的，一个专门用于包含iframe，一个专门用于表现数据，然后再将这两个div重叠即可。很巧妙，但是我怎么没想到。这就应了那句话：简单的才是美的。

现在开始说代码，hoho。
首先是用于遮盖select的层：s

// 创建层
var s=document.createElement("DIV");

// 设置层的相关属性
s.style.visibility="";

// 定义层的样式
s.style.position="absolute";
s.style.left="200";
s.style.top="100";
s.style.width="500";
s.style.height="90";
s.style.border="black 1px solid";
s.style.backgroundColor="white";

// 生成iframe
var L=document.createElement("IFRAME");
L.name="completionFrame";

// 定义iframe的样式，宽高与s相同
L.width=s.style.width;
L.height=s.style.height;

// 附加L到s
s.appendChild(L);

// 显示s
document.body.appendChild(s);


其次是你要表现数据的DIV层：t
js如下：

// 创建层
var t=document.createElement("DIV");

// 设置相关属性
t.style.visibility="";
t.zIndex=1;

// 定义样式表，长宽高和定位等
t.style.position="absolute";
t.style.left="200";
t.style.top="100";
t.style.width="500";
t.style.height="90";
t.style.border="blue 1px solid";
t.style.backgroundColor="white";

// 定义你要表现的内容
t.innerHTML = "Hello World";

// 显示
document.body.appendChild(t);


这样就大功告成了，经过测试，在ie和firefox下都是可以的。

这里有几个问题需要说明一下：

生成的L(IFRAME)我并没有指定其src，但是不影响效果。google-suggest里的iframe对象指定了src：http://www.google.com/webhp?complete=1&hl=en，其实就是一个空白页，我想这么写起来可能更严谨一些吧
按照我上面写的代码，在实际显示的时候，包含iframe的div层可能会稍大一些，也就是会露出“白边”，大家在实际使用的时候可以进行调整
注意两个层显示的顺序，也就是append到body的顺序，我是先让包含iframe的层显示，再让显示数据的层显示，如果调换，包含iframe的层就会遮住表现数据的层，即使是改两个层的zindex也不能解决，希望有人能关注一下哈
如果你拷贝我的代码到你的script中，发现不能运行，有可能是你网页编码的问题，因为我的注释全都是用的中文，如果你用en或utf8输出的话，可能就会有问题
即使是用iframe，在ie下仍然会有一个bug，就是如果其遮盖的地方有获得焦点的输入框时，它无法遮盖那个闪烁的光标。这个问题在gmail里面也没有解决。不过可以通过一些focus操作来解决这个小小的bug。
这里我只写了js实现的部分，有兴趣的同学可以试着自己封装一下，就先写到这，先去洗衣服了···