實現 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 圖片,而且它工作的同樣出色。

 

/*讓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;">&nbsp;</div>50 51 <div class="fixed">我管你怎麼滾,我就是雷打不動,哈哈哈。</div>52 53 </body>54 55 </html>

 

 

相關文章

Alibaba Cloud 10 Year Anniversary

With You, We are Shaping a Digital World, 2009-2019

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。