逛mootools核心成員Thomas Aylott的部落格看到，不過有點標題黨了，實際效果並沒有那麼靈光，只是定義四個類，分別用來固定視口的上下左右。很遺憾，它無法解決與top,bottom,left,right並用的問題（見例子）。它利用到IE8已經廢棄的expression來計算頁面的大小，從而固定我們想固定的元素。裡面用到一技巧，就是給html或body元素添加一張背景圖片，並設定background-attachment:fixed，用於強制在頁面重繪之前執行CSS，也就是執行它裡面的expression。另，我們也不需要一張真的圖片，我們給它一個about:blank命令就可以，就像平時對付連結一樣，僅僅就是想要一個hover效果非得塞給它一個href。
.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;}* html,* html body {background-image:url(about:blank);background-attachment:fixed;}* html .fixed-top {position:absolute;bottom:auto;top:expression(eval(document.documentElement.scrollTop));}* 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)));}* 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)));}* html .fixed-left {position:absolute;right:auto;left:expression(eval(document.documentElement.scrollLeft));}
<br /><!doctype html><br /><html dir="ltr" lang="zh-CN"><br /> <head><br /> <meta charset="utf-8"/><br /> <title>CSS Position Fixed for IE6</title><br /> <style><br />.fixed-top {position:fixed;bottom:auto;top:0px;}<br />.fixed-bottom {position:fixed;bottom:0px;top:auto;}<br />.fixed-left {position:fixed;right:auto;left:0px;}<br />.fixed-right {position:fixed;right:0px;left:auto;}</p><p>* html,* html body {background-image:url(about:blank);background-attachment:fixed;}<br />* html .fixed-top {position:absolute;bottom:auto;top:expression(eval(document.documentElement.scrollTop));}<br />* 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)));}<br />* 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)));}<br />* html .fixed-left {position:absolute;right:auto;left:expression(eval(document.documentElement.scrollLeft));}<br />.fixed-bottom {<br /> position:fixed;<br /> bottom:20px;<br /> background:aqua;<br /> width:200px;<br /> height:200px;<br />}<br /> </style></p><p> </head><br /> <body><br /> <div class="fixed-bottom "></div></p><p> </pre><br /> </body><br /></html><br />
運行代碼
PS：要真正解決IE6的這個bug，就需要用到Dean Edwards大神的IE7.js
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
