
ie6 fixed bug的解决方法 (css+js)
浏览:32日期:2024-06-14
复制代码代码如下: #fixed { position: absolute; top: 0; left: 0; width: 10em; height: 100%; } body #fixed { position: fixed; } #content { margin-left: 10em; background:red; height:800px; } 利用css选择器覆盖原position的属性值; fixed层的父层需是body才能这样实现; 但是这样还不完美 并不能完全实现效果,因为不会随body页面拉动而滚动 要实现随body页面滚动而滚动 需添加以下js代码 复制代码代码如下: script language='javascript' type='text/javascript' function fixedPop1(){ var m=60; //top值 var obj=document.getElementById('TopDivInner'); //position:fixed对象 var n=50; //top值 var obj2=document.getElementById('TopDiv'); //position:fixed对象 window.onscroll=function(){obj2.style.top=(document.body.scrollTop||document.documentElement.scrollTop)+n+’px’; obj.style.top=(document.body.scrollTop||document.documentElement.scrollTop)+m+’px’; } window.onresize=function(){obj2.style.top=(document.body.scrollTop||document.documentElement.scrollTop)+n+’px’; obj.style.top=(document.body.scrollTop||document.documentElement.scrollTop)+m+’px’; } }; $(function(){ fixedPop1(); }); /script 豆瓣的弹出登陆框就是利用这样的方式实现的,当然要在js代码上加 if IE6的 到此,加上通过js判断屏幕分辨率进而改变弹出框的位置,使其更加合理化,就基本完成了豆瓣弹出登陆款的实现
然而这个在ie6下存在拖动滚动条引起登陆框闪动的问题,为解决这个问题可以利用css e xpression 代价是更高的内存占用 复制代码代码如下: !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' / title无标题文档/title style type='text/css' * { margin: 0px; padding: 0px; } body { background-image: url(http://global.tianya.cn/global/gnav/css/nothing.txt); background-attachment: fixed; /* prevent screen flash in IE6 */ } #topNavWrapper { width: 980px; text-align: left; height: 31px; margin: 0px auto; z-index:100; _position: relative ; _top:0px; } #topNav { width: 980px; float: left; display: block; z-index: 100; overflow: visible; position: fixed; top: 0px; /* position fixed for IE6 */ _position: absolute; _top: expression(documentElement.scrollTop + 'px'); background-image: url(http://global.tianya.cn/global/gnav/images/top_r.gif); background-repeat: no-repeat; background-position: right; height: 31px; } .show{ position:absolute; top:500px; left:400px; border:#ff0000 1px solid; } /style /head body div ul /ul /div 这里是大量的br换行标签。div class='show'show/div /body /html since1984应该利用类似的技术实现其底部半透明框框

标签:
IE浏览器
相关文章: