您的位置：首页 > 其它

IE中下拉列表遮盖问题的解决方法

2015-07-13 02:34 561 查看

在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 onclick=/"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 onclick="test(this)">Test</button><br/>

< select>

< option value="1">选项1</option>

< option value="2">选项2</option>

< option value="3">选项3</option>

< /select>

< /BODY>

< /HTML>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航