當(dāng)前位置：首頁 > 前端技术 > CSS >内容正文

CSS

实现 IE6 支持 position fixed 的 CSS 属性

發(fā)布時(shí)間：2023/12/10 CSS 32 豆豆

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

眾所周知?IE6?不支持?position:fixed?，這個(gè)?bug?與?IE6?的雙倍?margin?和不支持?png?透明等?bug?一樣臭名昭著。

如何讓?position:fixed?在?IE6?中工作的？

本文所使用的技巧是用了一條?Internet?Explorer?的?CSS?表達(dá)式?(expression)?。你不可以直接使用該表達(dá)式，因?yàn)樗赡軙?huì)因?yàn)榫彺娑桓隆＝鉀Q這一點(diǎn)的最簡(jiǎn)單的方式是使用?eval?包裹你的語句。

如何解決“振動(dòng)”的問題？

顯然?IE?有一個(gè)多步的渲染進(jìn)程。當(dāng)你滾動(dòng)或調(diào)整你的瀏覽器大小的時(shí)候，它將重置所有內(nèi)容并重新渲染頁面，這個(gè)時(shí)候它就會(huì)重新處理?CSS?表達(dá)式。這會(huì)引起一個(gè)丑陋的“振動(dòng)”?bug?，在此處固定位置的元素需要調(diào)整以跟上你的(頁面的)滾動(dòng)，于是就會(huì)“跳動(dòng)”。

解決此問題的技巧就是使用?background- attachment:fixed?為?body?或?html?元素添加一個(gè)?background-image?。這就會(huì)強(qiáng)制頁面在重畫之前先處理?CSS?。因?yàn)槭窃谥禺嬛疤幚?CSS?，它也就會(huì)同樣在重畫之前首先處理你的?CSS?表達(dá)式。這將讓你實(shí)現(xiàn)完美的平滑的固定位置元素！

我發(fā)現(xiàn)的另外一個(gè)小技巧是，你根本無需一個(gè)真實(shí)的圖片！你可以使用一個(gè)?about:blank?替代一個(gè)?spacer.gif?圖片，而且它工作的同樣出色。

/*讓position:fixed在IE6下可用! *//* 頭部固定 */.fixed-top{position:fixed;bottom:auto;top:0px;}/* 底部固定 */.fixed-bottom{position:fixed;bottom:0px;top:auto;}/* 左側(cè)固定 */.fixed-left{position:fixed;right:auto;left:0px;}/* 右側(cè)固定 */.fixed-right{position:fixed;right:0px;left:auto;}/* 上面的是除了IE6的主流瀏覽器通用的方法 *//* 修正IE6振動(dòng)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 右側(cè)固定 */* 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 左側(cè)固定 */* 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>實(shí)現(xiàn) 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">我管你怎么滾，我就是雷打不動(dòng)，哈哈哈。</div> 52 53 </body> 54 55 </html>

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

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