在IE6下,下拉框(select)会遮住弹出层

方法一:

IE6下下拉框(select)会遮住弹出层,用样式办法暂时无法解决,包括z-index这个属性。

最变态也是最简单的方法,就是在层弹出的时候把下拉框给隐藏掉,用display:none属性或visable:hiddle属性;当层隐藏的时候再把下拉框给显示出来:

function hiddenselect(){
    var f = document.forms["form1"];
    if (f){
        for (i=0;i<f.elements.length;i++){
            if (f.elements[i].type=="select-one"){
                f.elements[i].style.display="none";
            }
        }
    }
}

function showselect(){
    var f = document.forms["form1"];
    if (f){
        for (i=0;i<f.elements.length;i++){
            if (f.elements[i].type=="select-one"){
                f.elements[i].style.display="";
            }
        }
    }
}

方法二:

select元素在ie中是属于一个特例,它和其他的html元素不同,从浏览器层面来解释,它是一个窗体级别的元素,所以它的优先级高于其他所有的html标签,所以会遮住别人,只有同为窗体级的frame才能遮住它!微软为了解决这个问题,就给iframe(这个东东不是窗体级的哦!)增加了一个属性,让它能够遮住select,因此,iframe在ie中就附有了这个神圣的使命,遮住select,不让它随意地抛头露面,而且,由于iframe本身并不是窗体级别的元素,所以只要设置z-index,就可以设置iframe在页面中的层次关系,利用这一点就可以很方便来遮住那个不怎么讨喜的select。代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Author" content="Sheneyan" />
<script type="text/javascript">
function initBK(){
    var o = document.createElement('iframe');
    o.id = 'fram_bk';
    document.body.appendChild(o);
}
function popMenu(e){
    var o = window.event?event.srcElement:e.target;
    var p = getXY(e);
    if (document.all){
        if (!$('fram_bk')){initBK();}
        with ($('fram_bk').style){
            display='block';
            top = p.y+"px";
            left = p.x+"px";
        }
    }
    with ($('menu').style){
        display='block';
        top = p.y+"px";
        left = p.x+"px";
    }
}
function getXY(e){
    var posx=0,posy=0;
    if(e==null) e=window.event;
    if(e.pageX || e.pageY){
        posx=e.pageX; posy=e.pageY;
    }
    else if(e.clientX || e.clientY){
        if(document.documentElement.scrollTop){
            posx=e.clientX+document.documentElement.scrollLeft;
            posy=e.clientY+document.documentElement.scrollTop;
        } else {
            posx=e.clientX+document.body.scrollLeft;
            posy=e.clientY+document.body.scrollTop;
        }
    }
    return {x:posx,y:posy};
}
function $(id){
    return document.getElementById(id)
}
</script>
<style type="text/css">
    div#menu{display:none;position:absolute;width:200px;height:300px;z-index:100;background:yellow;}
    iframe#fram_bk{border:0;position:absolute;display:none;z-index:0;width:200px;height:300px;}
</style>
</head>

<body>
<button onclick="popMenu(event)">点我看看效果</button><br />
<div id="menu">欢迎访问诺豆网 www.Nuodou.com<br>欢迎访问诺豆网 www.Nuodou.com<br>欢迎访问诺豆网 www.Nuodou.com<br>欢迎访问诺豆网 www.Nuodou.com</div>
<select><option>这是select哦</option></select>
</body>
</html>