IE 6 select 显示在浮层下浮层不随屏滚动不闪屏 _Web前端

IE 6 select 显示在浮层上浮层不随屏滚动不闪屏

两个问题：

1、IE 6 select 显示在浮层上

2、浮层不随屏滚动不闪屏

最近在做一个项目，在同一页面内碰到了这两个问题。废话少说，上解决方法。

第一个问题，要添加一个空iframe 设置iframe的大小和select 大小相同，位置相同，先做隐藏。当浮层在select上时，把iframe 显示出来，这样就顺利解决了第一个问题。

这是我有网上看的别的解决方案，为什么要用iframe 不用div 或其他标签，我去试了一下其他标签都不行，具体为什么，我也不知道。

第二个问题，浮层不随滚动条滚动固定在右上角的位置，IE 6 不支持 fixed ，我用的是css表达式_top:expression(eval(document.documentElement.scrollTop+30)); 能解决问题。

但是移动滚动条的时候浮层会闪动，在 IE 6 下要想和 fixed 效果一样，只需要在 body 样式里面添加一个空的图片?_background:url(about:blank) fixed; 就顺利解决了。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=GB2312">
    <meta name="description" content="">
    <meta name="keywords" content="">

    <title>demo</title>
    <style type="text/css">
    *{margin:0;padding:0;}
    body{_background:url(about:blank) fixed;}
    .layout{width:960px;margin:0 auto;}
    .fr{float:right;}
    .select{width:120px;}
    .layout{height:2000px;}
    .selectBox{width:120px;height:40px;margin-top:25px;position:relative;}
    #iframetest{border:none;z-index:1;position:absolute;left:0;top:0;width:120px;height:40px;display:none;}
    /* 浮动层 */
    #inner1,#inner2{position:relative;height:330px;overflow:hidden;text-align:center;color:#FFF;font-size:30px;}
    #inner1{width:80px;  background:#666;}
    #inner2{width:250px; background:#999;}

    #btn_show,#btn_hide{position:absolute; top:120px;width:30px;line-height:40px; cursor:pointer;background:#000;color:#FFF;font-weight:bold;}
    #btn_show{left:0}
    #btn_hide{right:0}

    #float_layer{position:fixed;top:30px;right:0;} 
    #float_layer{_position:absolute;_top:expression(eval(document.documentElement.scrollTop+30));}

    </style>
</head>

<body>
<div class="layout">
    <div class="selectBox fr">
        <form id="huigu">
            <select name="select" class="select" id="sel_wq">
                <option value="0">2010</option>
                <option value="1">2009</option>
                <option value="2">2008</option>
            </select>
            <iframe id="iframetest"></iframe>
        </form>
    </div>

</div>

<div id="float_layer">
    <div id="inner1" style="display:block;">
        <div id="btn_show">&lt;</div>
        1
    </div>
    <div id="inner2" style="display:none;">
        <div id="btn_hide">&gt;</div>
        2
    </div>
    <script type="text/javascript">
    (function(){
        var $ = function(id){
            return document.getElementById(id);
        }
        $("btn_show").onclick = function(){
            $("inner1").style.display = 'none';
            $("inner2").style.display = 'block';
            $("iframetest").style.display = 'block';
        }
        $("btn_hide").onclick = function(){
            $("inner1").style.display = 'block';
            $("inner2").style.display = 'none';
            $("iframetest").style.display = 'none';
        }
    })()

    </script>
</div>


</body>
</html>

IE 6 select 显示在浮层下 浮层不随屏滚动 不闪屏

IE 6 select 显示在浮层下浮层不随屏滚动不闪屏