真正完美解决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...
有兴趣的朋友去看这个英文版,比我这个详细的多,在这里做下搬运工一下(翻译都没翻译),只是希望可以帮助那些被这个问题困扰的朋友:)