解决IE6下Position:fixed问题

原文地址:http://hi.baidu.com/guodong828/blog/item/c52d3e34ab879b315bb5f54a.html

参考地址:http://www.wxwdesign.cn/article/skills/ie6_position_fixed_debug.htm

 

 

 

在IE6.0及以下版本的浏览器里是不支持position:fixed。而在IE7,IE8,firefox,opera,chrome都可以完美的支持此特性的。解决此问题的要点主要有:

1).容器要有一个背景图片

2).设置它的滚动属性为fixed。

3).用IE特有的e­xpression方法计算出元素的top,left,right,bottom的量。

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=gb2312" />
5 <title>IE6 fixed</title>
6 <style type="text/css">
7 *
8 {
9 margin: 0px;
10 padding: 0px;
11 }
12 body {
13 _background-image: url(about:blank); /*用浏览器空白页面作为背景*/
14 _background-attachment: fixed; /* prevent screen flash in IE6 确保滚动条滚动时,元素不闪动*/
15 }
16
17 #topNav {
18 width: 980px;
19 z-index: 100; /*设置浮动层次*/
20 overflow: visible;
21 position: fixed;
22 top: 50px; /* 其他浏览器下定位,在这里可设置坐标*/
23 _position: absolute; /*IE6 用absolute模拟fixed*/
24 _top: expression(documentElement.scrollTop + 50 + "px"); /*IE6 动态设置top位置*/
25 /* documentElement.scrollTop 设置浮动元素始终在浏览器最顶,可以加一个数值达到排版效果 */
26 background-color:#0000FF;
27 height: 31px;
28 }
29 .show{
30 position:absolute;
31 top:500px;
32 left:400px;
33 border:#ff0000 1px solid;
34 }
35 </style>
36 </head>
37 <body>
38 <div class="jd_menu" id="topNav">1111</div>
39 <br /><br /><br /><br /><br /><br /><br /><br /><br />
40 <br /><br /><br /><br /><br /><br /><br /><br /><br />
41 <br /><br /><br /><br /><br /><br /><br /><br /><br />
42 <br /><br /><br /><br /><br /><br /><br /><br /><br />
43 <br /><br /><br /><br /><br /><br /><br /><br /><br />
44 <br /><br /><br /><br /><br /><br /><br /><br /><br />
45 <br /><br /><br /><br /><br /><br /><br /><br /><br />
46 <br /><br /><br /><br /><br /><br /><br /><br /><br />
47 <br /><br /><br /><br /><br /><br /><br /><br /><br />
48 <br /><br /><br /><br /><br /><br /><br /><br /><br />
49 <br /><br /><br /><br /><br /><br /><br /><br /><br />
50 <div class="show">show</div>
51 <p>
52  利用给<body>设置固定的背景,防止滚动条滚动时的闪动;如果<body>中要设置滚动的背景而产生冲突,可以把代码写在html选择器里面,如:
53 html {
54 _background-image: url(about:blank);
55 _background-attachment: fixed; /* prevent screen flash in IE6 */
56 }
57 body {
58 background-image: url(1.jpg);
59 background-attachment: scroll;
60 }
61 </p>
62 </body>
63 </html>
64
posted @ 2010-05-31 10:36  db's jim  阅读(321)  评论(0编辑  收藏  举报