今天小编跟大家讲解下有关ie6 fixed bug的解决方法 (css+js) ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关ie6 fixed bug的解决方法 (css+js) 的相关资料，希望小伙伴们看了有所帮助。
复制代码代码如下: #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; } #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: 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 id="topNavWrapper"> <ul class="jd_menu"id="topNav"> </ul> </div> 这里是大量的br换行标签。<div class="show">show</div> </body> </html> since1984应该利用类似的技术实现其底部半透明框框来源：爱蒂网
