让层遮挡select（ie6下的问题）

虽然现在很多比较大的网站已经不考虑ie6了，不过这些方法，或者其中原理还是值得记录下来的。所以整理的时候，把这篇文章留下了。

<script language="javascript">

var ie55up =
IsIE55Up();
var overIframe = null;

function
DivOver(objID)
{
var obj =
document.all[objID];
//
只有IE5.5以上Iframe的z-index才有效
if
(ie55up)
{
if (overIframe ==
null)
{
overIframe =
document.createElement("<iframe src=‘about:blank‘
style=‘position:absolute;left:0;top:0;z-index:998;display:none‘ scrolling=‘no‘
frameborder=‘0‘></iframe>");
}
document.body.insertAdjacentElement("beforeEnd",overIframe);
with(overIframe.style)
{
top
= obj.style.top;
left = obj.style.left;
width =
obj.offsetWidth;
height =
obj.offsetHeight;
display =
‘block‘;
}
obj.style.zIndex =
"999";
}
else //
隐藏被ID为objID的对象（层）遮挡的所有select
{
var sels =
document.getElementsByTagName_r(‘select‘);
for (var i = 0; i
< sels.length; i++)
  if
(Obj1OverObj2(document.all[objID], sels))
sels.style.visibility
=
‘hidden‘;          
}
}

//判断obj1是否遮挡了obj2
function
Obj1OverObj2(obj1,
obj2)
{
  var
pos1 =
getPosition(obj1)
  var pos2
= getPosition(obj2)
  var
result = true;
  var
obj1Left = pos1.left -
window.document.body.scrollLeft;
  var
obj1Top = pos1.top -
window.document.body.scrollTop;
  var
obj1Right = obj1Left +
obj1.offsetWidth;
  var
obj1Bottom = obj1Top +
obj1.offsetHeight;
  var
obj2Left = pos2.left -
window.document.body.scrollLeft;
  var
obj2Top = pos2.top -
window.document.body.scrollTop;
  var
obj2Right = obj2Left +
obj2.offsetWidth;
  var
obj2Bottom = obj2Top +
obj2.offsetHeight;
  
  if
(obj1Right <= obj2Left || obj1Bottom <= obj2Top
||
      obj1Left
>= obj2Right || obj1Top >=
obj2Bottom)
    result
= false;
  return
result;
}

//
获取对象的坐标
function
getPosition(Obj)
{
for (var
sumTop=0,sumLeft=0;Obj!=window.document.body;sumTop+=Obj.offsetTop,sumLeft+=Obj.offsetLeft,
Obj=Obj.offsetParent);
return
{left:sumLeft,top:sumTop}
}

//
是否IE5.5以上版本
function IsIE55Up () {
var agt =
navigator.userAgent.toLowerCase();
var isIE =
(agt.indexOf("msie")!=-1);
if
(isIE)
{
var stIEVer =
agt.substring(agt.indexOf("msie ") + 5);
var verIEFull =
parseFloat(stIEVer);
return verIEFull >=
5.5;
}
return
false;
}
</script>
<script>
    window.onload
=
function(){DivOver("div1")}
</script>

<div
style="position: absolute;left:10px;top:20px;width:200px;height:85px;border:1px
solid red;"
id="div1">
看看现在这个层下面的select不是简单的隐藏了：）
</div>
<select
name="">
<option>test1</option>
<option>test2</option>
<option>test3</option>
</select>

<select
name="">
<option>test1test1test1test1test1test1test1test1test1test1test1test1test1test1</option>
<option>test2</option>
<option>test3</option>
</select>

<select
name="">
<option>test1</option>
<option>test2</option>
<option>test3</option>
</select>

最后自己先点评下：
上面的方法可以解决这个问题。不过有时也会只出现ifram白块，但要显示的东西没有出来这时你要修改“overIframe
= document.createElement("<iframe src=‘about:blank‘
style=‘position:absolute;left:0;top:0;z-index:998;display:none‘ scrolling=‘no‘
frameborder=‘0‘></iframe>");”为“overIframe =
document.createElement("<iframe src=‘about:blank‘
style=‘position:absolute;left:0;top:0;display:none‘ scrolling=‘no‘
frameborder=‘0‘></iframe>");”，就是去掉其中的“z-index:998;”，然后后面的“obj.style.zIndex
= "999";”也可以不要，不过最好还是按上面的写。
希望可以帮大家解决问题。