真正完美解决IE6下position:fixed问题的方法{使用expression()没有抖动}

相信每个前端开发者都和我一样受着IE6的折磨...今天这篇文章帮助开发者解决一个开发中常见的IE6兼容问题。也许你觉得说现在谁还用IE6啊?但通过本人所运营的几个网站的Google Analytics得到的数据,通过IE6访问的人数比例高达40%多,其中一个传统行业更是达到了60%左右(IE8:20%、IE7:10%),自己汗一个。(上面提到的数据的日期是:2010/7/12)

废话不说了,切入正题

核心css代码:

 

代码
html {_background-image: url(about:blank); _background-attachment: fixed;/* prevent screen flash in IE6 */}
body
{background-attachment: scroll;}
#base_wrapper
{position:fixed;
 z-index:9999999;
 bottom:0;
 width:100%;
 _position: absolute;
 _top: expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));
 }

核心html代码:

 

代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-cn" xml:lang="zh-cn">
<head>
<title>ice6 IE6方案</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
</head>
<body>
<div id="box"></div>
<div id="base_wrapper">随便弄点东西进来吧,这个方案我感觉比开心网和人人网用js控制的方案好,起码不用去用fadeIn、fadeOut去修复抖动</div>
</body>
</html>

 

这里有个demo,大家可以自行下载,随意使用。

连接地址:http://cid-cc55edbb0779c14a.office.live.com/self.aspx/.Public/BlogDemos/ie6PostionFixed.htm

原始方案链接:http://www.webmasterworld.com/css/3592524.htm ,文章题目为:

Position fixed in ie6 with "expression()" and no jittering

Why and how...

有兴趣的朋友去看这个英文版,比我这个详细的多,在这里做下搬运工一下(翻译都没翻译),只是希望可以帮助那些被这个问题困扰的朋友:)

posted on 2010-07-13 10:04  ice6  阅读(1107)  评论(3编辑  收藏  举报

导航