IE6中Div 遮罩层覆盖不住select控件的解决方法
2009-12-19 15:28
507 查看
又是一周干着测试员的工作，没有任何任务安排，只得自己找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了.
注意：是用来覆盖的层，不是用来显示内容的层
突然想到上次在演示的时候，看到在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了.
注意：是用来覆盖的层，不是用来显示内容的层
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- IE6中Div 遮罩层覆盖不住select控件的解决方法
- 弹出层Div 覆盖不住select控件的解决方法
- IE6下div层被select控件遮住的问题解决方法
- 弹出层Div 覆盖不住select控件的解决方法
- IE6下div层被select控件遮住的问题解决方法
- js 解决 div无法覆盖select控件的方法 (IE8之前的浏览器)
- 解决Select覆盖Div的简单直接的方法
- IE6下select标签覆盖div的完美解决办法
- IE6 select z-index无效，遮挡div bug的解决方法
- ie6下select覆盖div的解决办法
- c#div覆盖dropdownlist或select控件的方法
- IE6下select下拉框遮住div层的解决方法(用iframe解决)
- IE6 Select元素无法被div等元素覆盖的bug解决办法【zz】
- IE6下Select元素被div等元素覆盖的解决办法
- IE6 Select元素无法被div等元素覆盖的bug解决办法
- IE6 Select控件挡住DIV内容解决办法
- SELECT 元素在IE6中遮挡DIV的解决方法
- IE6 Select元素无法被div等元素覆盖的bug解决办法(转）
- IE6 Select元素无法被div等元素覆盖的bug解决办法
- IE6 Select元素无法被div等元素覆盖的bug解决办法