IE6模拟position:fixed效果
代码
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html>
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
5 <meta name="keywords" content="关键字" />
6 <meta name="description" content="页面简介" />
7 <meta name="generator" content="程序" />
8 <meta name="author" content="作者[ReKey]" />
9 <meta name="copyright" content="版权所有[ReKey]" />
10 <meta name="MSSmartTagsPreventParsing" content="True" />
11 <meta http-equiv="MSThemeCompatible" content="Yes" />
12 <title>Untitled Document</title>
13 <style type="text/css">
14 body{margin:0;padding:5px 0 30px}
15 .test{border:1px solid #ccc;line-height:100px;margin:0 5px 5px;}
16 .fixed{position:fixed;bottom:0;left:15px;right:15px;height:30px;line-height:30px;background:#ccc;}
17 #iefixed{zoom:1;margin:-1px 15px 0;height:1px;overflow:hidden;}
18 </style>
19 <!--[if lt IE 7]>
20 <script type="text/javascript">
21 function _fixBackground(){
22 var body = document.body;
23 var BLANK_GIF;
24 if (body.currentStyle.backgroundAttachment != "fixed") {
25 if (body.currentStyle.backgroundImage == "none") {
26 body.runtimeStyle.backgroundImage = "url("+BLANK_GIF+")"; // dummy
27 body.runtimeStyle.backgroundAttachment = "fixed";
28 }
29 }
30 }
31 window.onload = function(){
32 _fixBackground();
33 }
34 </script>
35 <style type="text/css">
36 .fixed{position: absolute;
37 bottom:0;
38 clear: both;
39 width:expression(document.getElementById('iefixed').clientWidth);
40 left:expression(document.getElementById('iefixed').offsetLeft);
41 top:expression(eval(document.compatMode &&
42 document.compatMode=='CSS1Compat') ?
43 documentElement.scrollTop
44 +(documentElement.clientHeight-this.clientHeight)
45 : document.body.scrollTop
46 +(document.body.clientHeight-this.clientHeight));}
47 </style>
48 < ![endif]-->
49 </head>
50 <body>
51 <!--[if lt IE 7]><div id="iefixed"></div>< ![endif]-->
52 <div class="test">增加高度的</div>
53 <div class="test">增加高度的</div>
54 <div class="test">增加高度的</div>
55 <div class="test">增加高度的</div>
56 <div class="test">增加高度的</div>
57 <div class="test">增加高度的</div>
58 <div class="test">增加高度的</div>
59 <div class="test">增加高度的</div>
60 <div class="test">增加高度的</div>
61 <div class="test">增加高度的</div>
62 <div class="test">增加高度的</div>
63 <div class="test">增加高度的</div>
64 <div class="test">增加高度的</div>
65 <div class="fixed">这里是position:fixed部分.</div>
66 </body>
67 </html>
2 <html>
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
5 <meta name="keywords" content="关键字" />
6 <meta name="description" content="页面简介" />
7 <meta name="generator" content="程序" />
8 <meta name="author" content="作者[ReKey]" />
9 <meta name="copyright" content="版权所有[ReKey]" />
10 <meta name="MSSmartTagsPreventParsing" content="True" />
11 <meta http-equiv="MSThemeCompatible" content="Yes" />
12 <title>Untitled Document</title>
13 <style type="text/css">
14 body{margin:0;padding:5px 0 30px}
15 .test{border:1px solid #ccc;line-height:100px;margin:0 5px 5px;}
16 .fixed{position:fixed;bottom:0;left:15px;right:15px;height:30px;line-height:30px;background:#ccc;}
17 #iefixed{zoom:1;margin:-1px 15px 0;height:1px;overflow:hidden;}
18 </style>
19 <!--[if lt IE 7]>
20 <script type="text/javascript">
21 function _fixBackground(){
22 var body = document.body;
23 var BLANK_GIF;
24 if (body.currentStyle.backgroundAttachment != "fixed") {
25 if (body.currentStyle.backgroundImage == "none") {
26 body.runtimeStyle.backgroundImage = "url("+BLANK_GIF+")"; // dummy
27 body.runtimeStyle.backgroundAttachment = "fixed";
28 }
29 }
30 }
31 window.onload = function(){
32 _fixBackground();
33 }
34 </script>
35 <style type="text/css">
36 .fixed{position: absolute;
37 bottom:0;
38 clear: both;
39 width:expression(document.getElementById('iefixed').clientWidth);
40 left:expression(document.getElementById('iefixed').offsetLeft);
41 top:expression(eval(document.compatMode &&
42 document.compatMode=='CSS1Compat') ?
43 documentElement.scrollTop
44 +(documentElement.clientHeight-this.clientHeight)
45 : document.body.scrollTop
46 +(document.body.clientHeight-this.clientHeight));}
47 </style>
48 < ![endif]-->
49 </head>
50 <body>
51 <!--[if lt IE 7]><div id="iefixed"></div>< ![endif]-->
52 <div class="test">增加高度的</div>
53 <div class="test">增加高度的</div>
54 <div class="test">增加高度的</div>
55 <div class="test">增加高度的</div>
56 <div class="test">增加高度的</div>
57 <div class="test">增加高度的</div>
58 <div class="test">增加高度的</div>
59 <div class="test">增加高度的</div>
60 <div class="test">增加高度的</div>
61 <div class="test">增加高度的</div>
62 <div class="test">增加高度的</div>
63 <div class="test">增加高度的</div>
64 <div class="test">增加高度的</div>
65 <div class="fixed">这里是position:fixed部分.</div>
66 </body>
67 </html>
