眾所周知 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 圖片，而且它工作的同樣出色。
/*讓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));}<strong>
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 3 <html xmlns="http://www.w3.org/1999/xhtml"> 4 5 <head> 6 7 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 8 9 <title>實現 IE6 下支援 position-fixed 的 CSS 屬性</title>10 11 <style type="text/css">12 13 * html, * html body {14 15 background-image:url(about:blank);16 17 background-attachment:fixed;18 19 }20 21 * html .fixed {22 23 bottom:auto;24 25 position:absolute;26 27 right:0;28 29 top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop, 10)||0)-(parseInt(this.currentStyle.marginBottom, 10)||0)));30 31 }32 33 .fixed {34 35 bottom:0;36 37 position:fixed;38 39 right:0;40 41 }42 43 </style>44 45 </head>46 47 <body>48 49 <div style="height:950px;"> </div>50 51 <div class="fixed">我管你怎麼滾，我就是雷打不動，哈哈哈。</div>52 53 </body>54 55 </html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
