IE6 fixed的完美解决方案

第一种方法：纯CSS 目前网上有的比较多的是这种解决方案（纯CSS）： 复制代码 代码如下: html{overflow:hidden;} body{height:100%;overflow:auto;} #rightform form{position:absolute;right:30px;top50px;} 这个方法有一个bug未解决：在IE6下会把所有position:absolute都变成“浮动”的元素；还有使用js方法滚动滚动条时会出现对象闪烁，如下方法结合了CSS和js的办法，解决了以上的问题。 复制代码 代码如下: !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' / titleIE6 fixed/title style type='text/css' * { margin: 0px; padding: 0px; } body { _background-image: url(about:blank); /*用浏览器空白页面作为背景*/ _background-attachment: fixed; /* prevent screen flash in IE6 确保滚动条滚动时，元素不闪动*/ } #topNav { width: 980px; z-index: 100; /*设置浮动层次*/ overflow: visible; position: fixed; top: 50px; /* 其他浏览器下定位，在这里可设置坐标*/ _position: absolute; /*IE6 用absolute模拟fixed*/ _top: expression(documentElement.scrollTop + 50 + 'px'); /*IE6 动态设置top位置*/ /* documentElement.scrollTop 设置浮动元素始终在浏览器最顶，可以加一个数值达到排版效果 */ background-color:#0000FF; height: 31px; } .show{ position:absolute; top:500px; left:400px; border:#ff0000 1px solid; } /style /head body div id='topNav'1111/div br /br /br /br /br /br /br /br /br / br /br /br /br /br /br /br /br /br / br /br /br /br /br /br /br /br /br / br /br /br /br /br /br /br /br /br / br /br /br /br /br /br /br /br /br / br /br /br /br /br /br /br /br /br / br /br /br /br /br /br /br /br /br / br /br /br /br /br /br /br /br /br / br /br /br /br /br /br /br /br /br / br /br /br /br /br /br /br /br /br / br /br /br /br /br /br /br /br /br / div class='show'show/div /body /html 只实现了垂直方向的fixed。若要实现水平方向的fixed，设置_left:expression(documentElement.scrollLeft + 'px'); 利用给body设置固定的背景，防止滚动条滚动时的闪动；如果body中要设置滚动的背景而产生冲突，可以把代码写在html选择器里面，如： 复制代码 代码如下: html { _background-image: url(about:blank); _background-attachment: fixed; /* prevent screen flash in IE6 */ } body { background-image: url(1.jpg); background-attachment: scroll; } 第二种方法 JavaScript 复制代码 代码如下: !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=utf-8' / style type='text/css' body{ margin:0px; padding:0px; font-size:12px; line-height:22px;} p{ margin:0px; padding:36px;} .float2{ position:absolute; padding:26px; border:#999999 3px solid; background-color:#3399FF; right:200px; top:200px;} .fixed{ position:absolute; right:60px; top:100px; border:#666666 3px solid; background-color:#CCCCCC; padding:26px;} /style script language='javascript' type='text/javascript' window.onload=function(){ var n=100; //top值 var obj=document.getElementById('fixed'); //position:fixed对象 window.onscroll=function(){obj.style.top=(document.body.scrollTop||document.documentElement.scrollTop)+n+’px’;} window.onresize=function(){obj.style.top=(document.body.scrollTop||document.documentElement.scrollTop)+n+’px’;} } /script titleposition_fixed测试/title /head body p测试内容........./p p测试内容........./p p测试内容........./p p测试内容........./p p测试内容........./p p测试内容........./p p测试内容........./p p测试内容........./p p测试内容........./p p测试内容........./p p测试内容........./p p测试内容........./p p测试内容........./p p测试内容........./p p测试内容........./p div class='float2'浮动的内容2/div div id='fixed'我的位置是固定的！拉动滚动条看效果。/div /body /html ie6对postion:fixed的完美解决方案 今天去一老外站看到了这他站上的十分平滑但却没有js，好奇，原来。。巧妙啊，分享下，相对而言比较节省资源。但效果好，使用方便，兼顾w3c。哈哈 !-- compliance patch for microsoft browsers -- !--[if lt IE 7]link rel='stylesheet' href='https://www.6hehe.com/dnjc/ie-stuff.css' type='text/css' media='screen'/![endif]-- ie-stuff.css 复制代码 代码如下: #footer { position: absolute; bottom: auto; clear: both; top:expression(eval(document.compatMode } 您可能感兴趣的文章:JS中toFixed()方法引起的问题如何解决iphone safari不支持position fixed的解决方法capacityFixed 基于jquery的类似于新浪微博新消息提示的定位框JavaScript toFixed() 方法跨浏览器的实践:position:fixed 层的固定定位IE6支持position:fixed完美解决方法javascript ie6兼容position:fixed实现思路