解决 ie6 下弹出框随着滚动条不断抖动

之前写的弹出框会在ie6下不断抖动,找了很久，终于找到了解决办法：

1.下面用纯css也实现了：（但这种办法有个缺陷，那就是：这会使页面上原有的absolute、relation都变成fixed的效果）

滚动条实际不是视口的而是body 模拟的

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>IE6 position:fixed bug</title>
<style>
*{padding:0;margin:0}
#outbox     {height:2000px;background-color:#FFCCCC;}
.box        {position:fixed; 100px; height:100px;top:100px; left:100px; background-color:#c50000}
</style>
<!--[if IE 6]>
<style type="text/css">
html         {overflow:hidden}
body         {height:100%;overflow:auto}
.box         {position:absolute;}
</style>
<![endif]-->
</head>
<body>
<div id="outbox">111</div>
<div class="box">固定块</div>
</body>
</html>

2.用js也可以简单的实现（），但是实现后ie6下会随着滚动条不断抖动，如何解决呢？？

出现抖动的原因：

IE有一个多步的渲染进程。当你滚动或调整你的浏览器大小的时候，它将重置所有内容并重画页面，这个时候它就会重新处理css表达式。这会引起一个丑陋的“振动”bug，在此处固定位置的元素需要调整以跟上你的(页面的)滚动，于是就会“跳动”。

解决方法：

解决此问题的技巧就是使用background-attachment:fixed为body或html元素添加一个background-image。这就会强制页面在重画之前先处理CSS。因为是在重画之前处理CSS，它也就会同样在重画之前首先处理你的CSS表达式。这将让你实现完美的平滑的固定位置元素！ background-image无需一张真实的图片，设置成about:blank就行。

css添加下面代码：

* html,* html body{background-image:url(about:blank);background-attachment:fixed}

至此，解决了ie6下不断抖动问题。

完整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=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*                    {padding:0; margin:0;}
* html,* html body{background-image:url(about:blank);background-attachment:fixed}
.header              { 100%;height:50px; line-height:50px; text-align:center;background-color:#666; color:#fff; position:fixed; top:0}
.content             { height:1500px;}
</style>
<script type="text/javascript" src="jquery 插件/jquery-1.8.0.js"></script>

<!--[if IE 6]>
<script>
   $(function(){
       $(window).scroll(function(){
	      var $stop=$(this).scrollTop();
		  $(".header").css({"position":"relative"})      //此行代码是为ie6写的
	      $(".header").offset({top:(0+$stop),left:0});
	   
	   })  
   })
</script>
<![endif]-->
</head>
<body>
<div class="header">
   jquery 练习
</div>
<div class="content"></div>
</body>
</html>

-------------------------------------------------------------

参考：

http://www.cnblogs.com/hooray/archive/2011/05/20/2052269.html

蓝色理想：http://bbs.blueidea.com/forum.php?mod=viewthread&tid=2979799