解决IE6下Position：fixed问题

Myth丶恋晨 2021-12-10 23:31 168阅读 0赞

原文地址：[http://hi.baidu.com/guodong828/blog/item/c52d3e34ab879b315bb5f54a.html][http_hi.baidu.com_guodong828_blog_item_c52d3e34ab879b315bb5f54a.html]

参考地址：[http://www.wxwdesign.cn/article/skills/ie6\_position\_fixed\_debug.htm][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特有的expression方法计算出元素的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 
 40 
 41 
 42 
 43 
 44 
 45 
 46 
 47 
 48 
 49 
 50 < div class ="show" > show </ div > 
 51 
 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 
 62 </ body > 
 63 </ html > 
 64

转载于:https://www.cnblogs.com/aji88/archive/2010/05/31/1747973.html

[http_hi.baidu.com_guodong828_blog_item_c52d3e34ab879b315bb5f54a.html]: http://hi.baidu.com/guodong828/blog/item/c52d3e34ab879b315bb5f54a.html
[http_www.wxwdesign.cn_article_skills_ie6_position_fixed_debug.htm]: http://www.wxwdesign.cn/article/skills/ie6_position_fixed_debug.htm