IE6 position:fixed (固定定位)的解决方案
ie6下是不支持position：fixed的，这是ie6下的一个bug，ie7+ firefox，chrome都支持固定定位的。怎么解决这个问题呢？
有两种方案：
1）针对ie6写hack，其他的浏览器仍然用position：fixed属性。使用position：fixed 很简单，这里就不再叙述了。下面介绍下怎么
解决ie6下的问题。
使用position：absolute 绝对定位来解决。构造一个滚动条，这个滚动条是包含该文档的内容滚动条（它可以是body的，也可以是某个div的）。很明显position：absolute是绝对
定位的。他脱离了整个文档流，他不相对该滚动条包含的文档，而应该是滚动条包含文档的上一级元素。
这个是body的滚动条。html为最顶级的元素，所有的元素都相对于它定位。代码如下：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>IE6 position:fixed bug</title>
6 <style>
7 * {
8 padding:0;
9 margin:0;
10 }
11 .mod-test {
12 text-align:center;
13 padding:50px;
14 font:14px/1.5 arial;
15 height:1800px;
16 }
17 .test {
18 background-color:#dfdfdf;
19 padding:5px;
20 border:1px solid #aaa;
21 position:fixed;
22 right:130px;
23 top:120px;
24 }
25 </style>
26 <!--[if IE 6]>
27 <style type="text/css">
28 html{overflow:hidden;position:relative}
29 body{height:100%;overflow:auto;}
30 .test{position:absolute;}
31 </style>
32 <![endif]-->
33 </head>
34 <body>
35 <div class="mod-test">
36 <h1>
37 <a href="" title="IE6 position:fixed bug" rel="bookmark">IE6 position:fixed bug</a>
38 </h2>
39 <p>position:fixed; vs position:absolute;<br />
40 <div class="test">
41 <img src="dj.jpg"/><br/>我一直在的
42 </div>
43 </div>
44 </body>
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>IE6 position:fixed bug</title>
6 <style>
7 * {
8 padding:0;
9 margin:0;
10 }
11 .mod-test {
12 text-align:center;
13 padding:50px;
14 font:14px/1.5 arial;
15 height:1800px;
16 }
17 .test {
18 background-color:#dfdfdf;
19 padding:5px;
20 border:1px solid #aaa;
21 position:fixed;
22 right:130px;
23 top:120px;
24 }
25 </style>
26 <!--[if IE 6]>
27 <style type="text/css">
28 html{overflow:hidden;position:relative}
29 body{height:100%;overflow:auto;}
30 .test{position:absolute;}
31 </style>
32 <![endif]-->
33 </head>
34 <body>
35 <div class="mod-test">
36 <h1>
37 <a href="" title="IE6 position:fixed bug" rel="bookmark">IE6 position:fixed bug</a>
38 </h2>
39 <p>position:fixed; vs position:absolute;<br />
40 <div class="test">
41 <img src="dj.jpg"/><br/>我一直在的
42 </div>
43 </div>
44 </body>
45 </html>
效果如下图
如果要构造一个包含的元素是一个滚动条呢？
代码可以这样修改
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>IE6 position:fixed bug</title>
6 <style>
7 * {
8 padding:0;
9 margin:0;
10 }
11 .mod-test {
12 text-align:center;
13 padding:50px;
14 font:14px/1.5 arial;
15 height:1800px;
16 }
17 .test {
18 background-color:#dfdfdf;
19 padding:5px;
20 border:1px solid #aaa;
21 position:fixed;
22 right:130px;
23 top:120px;
24 }
25 </style>
26 <!--[if IE 6]>
27 <style type="text/css">
28 html{height:100%;overflow:hidden;position:relative}
29 body{height:100%;overflow:hidden;}
30 .test{position:absolute;}
31 .mod-test{height:100%;overflow:auto;}
32 </style>
33 <![endif]-->
34 </head>
35 <body>
36 <div class="mod-test">
37 <h1>
38 <a href="" title="IE6 position:fixed bug" rel="bookmark">IE6 position:fixed bug</a>
39 </h2>
40 <p>position:fixed; vs position:absolute;<br />
41 <div class="test">
42 <img src="dj.jpg"/><br/>我一直在的
43 </div>
44 </div>
45 </body>
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>IE6 position:fixed bug</title>
6 <style>
7 * {
8 padding:0;
9 margin:0;
10 }
11 .mod-test {
12 text-align:center;
13 padding:50px;
14 font:14px/1.5 arial;
15 height:1800px;
16 }
17 .test {
18 background-color:#dfdfdf;
19 padding:5px;
20 border:1px solid #aaa;
21 position:fixed;
22 right:130px;
23 top:120px;
24 }
25 </style>
26 <!--[if IE 6]>
27 <style type="text/css">
28 html{height:100%;overflow:hidden;position:relative}
29 body{height:100%;overflow:hidden;}
30 .test{position:absolute;}
31 .mod-test{height:100%;overflow:auto;}
32 </style>
33 <![endif]-->
34 </head>
35 <body>
36 <div class="mod-test">
37 <h1>
38 <a href="" title="IE6 position:fixed bug" rel="bookmark">IE6 position:fixed bug</a>
39 </h2>
40 <p>position:fixed; vs position:absolute;<br />
41 <div class="test">
42 <img src="dj.jpg"/><br/>我一直在的
43 </div>
44 </div>
45 </body>
46 </html>
这2种方案都可以解决问题，但是这个方案有一个弊端 ，就是在不同屏幕分辨率的情况下会出现位置不对的现象，道理很简单，因为要指定left或者right的值，由于屏幕不一样，当然这些值也是不一样的。
现在的布局一般都是居中的，设置了宽度的。这也比较难解决，必须使用js脚本来处理这类问题。
2）完全使用position：absolute来解决固定定位问题。因为其他的浏览器都支持绝对定位。
代码如下：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>IE6 position:fixed bug</title>
6 <style type="text/css">
7 body { height:100%; overflow:hidden; position:relative;}
8 html { height:100%; overflow:hidden;}
9 .test{position:absolute;top:100px;left:100px;padding:2px;border:1px solid #aaa;}
10 .mod-test{
11 height:100%;
12 overflow:auto;
13 }
14 .inlet{
15 height:1800px;
16 }
17 </style>
18 </head>
19 <body>
20 <div class="mod-test">
21 <div class="inlet">
22 <h1>
23 <a href="" title="IE6 position:fixed bug" rel="bookmark">IE6 position:fixed bug</a>
24 </h2>
25 <div class="test">
26 <img src="dj.jpg"/><br/>我一直在的
27 </div>
28 </div>
29 </div>
30 </body>
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>IE6 position:fixed bug</title>
6 <style type="text/css">
7 body { height:100%; overflow:hidden; position:relative;}
8 html { height:100%; overflow:hidden;}
9 .test{position:absolute;top:100px;left:100px;padding:2px;border:1px solid #aaa;}
10 .mod-test{
11 height:100%;
12 overflow:auto;
13 }
14 .inlet{
15 height:1800px;
16 }
17 </style>
18 </head>
19 <body>
20 <div class="mod-test">
21 <div class="inlet">
22 <h1>
23 <a href="" title="IE6 position:fixed bug" rel="bookmark">IE6 position:fixed bug</a>
24 </h2>
25 <div class="test">
26 <img src="dj.jpg"/><br/>我一直在的
27 </div>
28 </div>
29 </div>
30 </body>
31 </html>
在ie6,7,8，9，ff，chrome中均测试通过。注意一点：不能给外包含的元素mod-test设置高度，不然的话，是没有滚动条的。而应该在里面设置一个容器，它设置一个高度。
