當前位置：首頁 > 前端技术 > CSS >内容正文

CSS

实现 IE6 支持 position fixed 的 CSS 属性

發布時間：2023/12/10 CSS 30 豆豆

生活随笔收集整理的這篇文章主要介紹了实现 IE6 支持 position fixed 的 CSS 属性小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

眾所周知?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>

總結

以上是生活随笔為你收集整理的实现 IE6 支持 position fixed 的 CSS 属性的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：火山PC大漠插件源码开源学习--木塔老师
下一篇：查看一个结构体成员的方法