在IE中下拉列表 有个BUG就是老是遮盖其他层，使得其他层内容不能正常显示。本文介绍一种利用IFRAME
的方法。
这边假设一种情景：单击某个按钮时，弹出一个层，但由于按钮正下方有一个下拉列表，在IE中就会出现，层
的内容无法正常显示的情况。
解决方法,完整代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Language" content="zh-cn" />
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<TITLE> Select</TITLE>
</HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--
var isIE = window.ActiveXObject ? true : false;
var container;
function test(btn){
var pos=getAbsPoint(btn);
container=document.createElement("div");
container.style.border="1px solid blue";
container.style.width="200px";
container.style.height="100px";
container.style.position="absolute";
container.style.top=(pos.y+20)+"px";
container.style.left=pos.x+"px";
container.style.backgroundColor="#349202";
container.innerHTML="<br/><br/>下拉列表被我遮盖了,哦!<br/><button οnclick=/"container.style.display='none'/">close</button>";
document.body.appendChild(container);
if(isIE){
var ifm = document.createElement("iframe");
var s = ifm.style;
ifm.frameBorder = 0;
ifm.height = (container.clientHeight - 3) + "px";
s.visibility = "inherit";
s.filter = "alpha(opacity=0)";
s.position = "absolute";
s.top = "0px";
s.width = container.clientWidth+ "px";
s.zIndex = -1;
container.insertAdjacentElement("afterBegin",ifm);
}
}
function getAbsPoint(e){
var x = e.offsetLeft;
var y = e.offsetTop;
while(e = e.offsetParent){
x += e.offsetLeft;
y += e.offsetTop;
}
return {"x": x, "y": y};
}
//-->
</SCRIPT>
<BODY>
<button οnclick="test(this)">Test</button><br/>
<select>
<option value="1">选项1</option>
<option value="2">选项2</option>
<option value="3">选项3</option>
</select>
</BODY>
</HTML>
2495
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
