實現 IE6 下支援 position-fixed 的 CSS 屬性並解決“震動”的問題
來源：互聯網
上載者：User
眾所周知 IE6 不支援 position:fixed ，這個 bug 與 IE6 的雙倍 margin 和不支援 png 透明等 bug 一樣臭名昭著。如何讓 position:fixed 在 IE6 中工作的？本文所使用的技巧是用了一條 Internet Explorer 的 CSS 運算式 (expression) 。你不可以直接使用該運算式，因為它可能會因為緩衝而不更新。解決這一點的最簡單的方式是使用 eval 包裹你的語句。如何解決“震動”的問題？顯然 IE 有一個多步的渲染進程。當你滾動或調整你的瀏覽器大小的時候，它將重設所有內容並重新渲染頁面，這個時候它就會重新處理 CSS 運算式。這會引起一個醜陋的“震動” bug ，在此處固定位置的元素需要調整以跟上你的(頁面的)滾動，於是就會“跳動”。解決此問題的技巧就是使用 background-attachment:fixed 為 body 或 html 元素添加一個 background-image 。這就會強制頁面在重畫之前先處理 CSS 。因為是在重畫之前處理 CSS ，它也就會同樣在重畫之前首先處理你的 CSS 運算式。這將讓你實現完美的平滑的固定位置元素！我發現的另外一個小技巧是，你根本無需一個真實的圖片！你可以使用一個 about:blank 替代一個 spacer.gif 圖片，而且它工作的同樣出色。CSS Code/*讓position:fixed在IE6下可用! *//* 頭部固定 */.fixed-top{position:fixed;bottom:auto;top:0px;}/* 底部固定 */.fixed-bottom{position:fixed;bottom:0px;top:auto;}/* 左側固定 */.fixed-left{position:fixed;right:auto;left:0px;}/* 右側固定 */.fixed-right{position:fixed;right:0px;left:auto;}/* 上面的是除了IE6的主流瀏覽器通用的方法 *//* 修正IE6震動bug */* html, * html body{background-image:url(about:blank);background-attachment:fixed;}/* IE6 頭部固定 */* html .fixed-top{position:absolute;bottom:auto;top:expression(eval(document.documentElement.scrollTop));}/* IE6 右側固定 */* html .fixed-right{position:absolute;right:auto;left:expression(eval(document.documentElement.scrollLeft+document.documentElement.clientWidth-this.offsetWidth)-(parseInt(this.currentStyle.marginLeft, 10)||0)-(parseInt(this.currentStyle.marginRight, 10)||0));}/* IE6 底部固定 */* html .fixed-bottom{position:absolute;bottom:auto;top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop, 10)||0)-(parseInt(this.currentStyle.marginBottom, 10)||0)));}/* IE6 左側固定 */* html .fixed-left{position:absolute;right:auto;left:expression(eval(document.documentElement.scrollLeft));}執行個體代碼：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>實現 IE6 下支援 position-fixed 的 CSS 屬性</title><style type="text/css">* html, * html body {background-image:url(about:blank);background-attachment:fixed;}* html .fixed {bottom:auto;position:absolute;right:0;top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop, 10)||0)-(parseInt(this.currentStyle.marginBottom, 10)||0)));}.fixed {bottom:0;position:fixed;right:0;}</style></head><body><div style="height:950px;"> </div><div class="fixed">我管你怎麼滾，我就是雷打不動，哈哈哈。</div></body></html>
