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 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"><</div> 1 </div> <div id="inner2" style="display:none;"> <div id="btn_hide">></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>?