IE6中Div 遮罩层覆盖不住select控件的解决方法

来源：互联网发布：古代疆域图软件编辑：程序博客网时间：2024/05/16 23:54

又是一周干着测试员的工作，没有任何任务安排，只得自己找bug来填充每天的日子。

突然想到上次在演示的时候，看到在IE6下同事自己写的弹出提示框无法遮住select下拉选择框的问题。当时是去掉了那个下拉框来解决这个问题，但是页面还有很多地方用到这个提示框。

用IE6运行一下发现很多页面都存在这个问题。

后来同事说在每个页面跳用这个函数之前隐藏掉所有的select下拉选择框，关闭提示框后显示所有的select下拉选择框。如果一个一个页面去一个个select去设置那将是让人无法接受，如果某一个页面漏掉了呢，而且下次去掉一个或添加一个下拉框就又得修改代码。

最后想到在验证函数的入口去调用注册这隐藏和显示方法。

       /**
* 隐藏表单上控件
*/
function hiddenControl(){
   //隐藏表单上的所有select下拉选择框
     var selobjs = document.getElementsByTagName("select");
     for(var i=0;i <selobjs.length;i++) {
     //alert(selobjs[i].name);
         selobjs[i].style.display='none';
     }
     //隐藏表单上的上传文件控件
     var fileobj=document.getElementById("objfileuploadx");
     if(fileobj){
     fileobj.style.display='none';
     }
}

/**
   * 显示表单上的控件
   */
function showControl(){
//显示表单上的所有select下拉选择框
     var selobjs = document.getElementsByTagName("select");
     for(var i=0;i <selobjs.length;i++) {
         selobjs[i].style.display='';
     }
     //显示表单上的上传文件控件
     var fileobj=document.getElementById("objfileuploadx");
     if(fileobj){
     fileobj.style.display='';
     }
}

但是发现一个问题，隐藏只能隐藏当前页面的select下拉框，所以后来导致只能遮罩住当前页面iframe，而无法遮罩住整个IE页面。查看同事的js代码，其是在document的body上动态创建了一个div遮罩层，而IE6本身存在这个bug，在IE7已经解决了。

解决的方法：

看如下代码，转自：http://chinasword.javaeye.com/blog/461017

Html代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
</head>
<body>
<div style="position:absolute;background:red;width:100px;height:200px;z-index:10000;left:20px;top:20px;"></div>
<select><option>sdf</option></select>
dfgdfgdfgdfgdfgdfgdfgdfgdfdfgdfgdfgdfgdfgdfgdfgdfgddfgdfgdfgdfgdfgdfgdfgdfgd
dfgdfgdfgdfgdfgdfgdfgdfgdf
</body>
</html>

先看看IE6下效果：

IE8下：

可见，这是极其难看的，无论层的z-index设到多少亿都是没用的，目前没发现完美的解决方法，都是存在bug的，本人现知道的有2种：

1.显示层之前隐藏全部select，此方法影响效率，也影响布局美观。

2.在层里插入一个隐藏iframe,奇怪的是，iframe可以覆盖select，需要设置iframe为浮动，透明度为0，IE6效果：

代码,IE6-8、firefox3.5、safari4、opera9测试下通过：

Html代码

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
</head>
<body>
<div style="position:absolute;background:red;width:100px;height:200px;left:20px;top:20px;">
<iframe style="position:absolute;width:100%;height:100%;_filter:alpha(opacity=0);opacity=0;border-style:none;"></iframe>
sdfsdfsdf<br>sdfsdfsdf<br>sdfsdfsdf<br>sdfsdfsdf<br>
</div>
<select><option>sdf</option></select>
dfgdfgdfgdfgdfgdfgdfgdfgdfdfgdfgdfgdfgdfgdfgdfgdfgddfgdfgdfgdfgdfgdfgdfgdfgd
dfgdfgdfgdfgdfgdfgdfgdfgdf
</body>
</html>

即：设置动态创建的div对象的innerHTML="<iframe style='position:absolute;width:100%;height:100%;_filter:alpha(opacity=0);opacity=0;border-style:none;'></iframe> "

-----在</div>前加入上面的语句

    解析：
        虽说div直接盖不住select
        但是div可以盖iframe，而iframe可以盖select,
        所以，把一个iframe来当作div的底，
        这个div就可以盖住select了.

注意：是用来覆盖的层，不是用来显示内容的层