又是一周干着测试员的工作,没有任何任务安排,只得自己找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
- <!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>
- <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了.
注意:是用来覆盖的层,不是用来显示内容的层