使用expression()完美解决IE6下position:fixed固定位置抖动问题
相信每个前端开发者都和我一样受着IE6的折磨...今天这篇文章帮助开发者解决一个开发中常见的IE6兼容问题。也许你觉得说现在谁还用IE6 啊？但通过本人所运营的几个网站的Google Analytics得到的数据，通过IE6访问的人数比例高达40%多，其中一个传统行业更是达到了60%左右（IE8：20%、IE7：10%），自己 汗一个。（上面提到的数据的日期是：2010/7/12）
废话不说了，切入正题
核心CSS代码：
01 html {
02 _background-image: url(about:blank); /* 阻止闪动 in IE6 , 把空文件换成about:blank , 减少请求 */
03 _background-attachment: fixed;
04 /* prevent screen flash in IE6 */
05 }
06
07 body {
08 background-attachment: scroll;
09 }
10
11 /* 你的图层 */
12 #base_wrapper {
13 position: fixed;
14 z-index: 9999999;
15 bottom: 0;
16 width: 100%;
17 _position: absolute;
18 _top: expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight
19 -this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)
20 -(parseInt(this.currentStyle.marginBottom,10)||0)));
21 }
核心html代码：
view source
?
01 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
02 <html xmlns="http://www.w3.org/1999/xhtml" lang="zh-cn" xml:lang="zh-cn">
03 <head>
04 <title>ice6 IE6方案</title>
05 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
06 <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
07 </head>
08 <body>
09 <div id="box"></div>
10 <div id="base_wrapper">钱运来|qianyunlai.com - 随便弄点东西进来吧，这个方案我感觉比开心网和人人网用js控制的方案好，起码不用去用fadeIn、fadeOut去修复抖动</div>
11 </body>
12 </html>