首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

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

2012-08-30 
IE 6 select 显示在浮层上 浮层不随屏滚动 不闪屏两个问题:1、IE 6 select 显示在浮层上2、浮层不随屏滚动

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; 就顺利解决了。

?


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

<!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 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>
?

热点排行