在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>