廢話不多說，先看一下下面這段代碼：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>IE6 position:fixed bug</title>
<style>
*{padding:0;margin:0}
p{height:2000px}
#gs{border:1px solid #000;position:fixed;right:30px;top:120px}
</style>
<!--[if IE 6]>
<style type="text/css">
html{overflow:hidden}
body{height:100%;overflow:auto}
#gs{position:absolute}
</style>
<![endif]-->
</head>
<body>
<div id="rightform">
<p>11111111111111111</p>
<input id="gs" name="gs" type="text" value="" />
</div>
</body>
</html>
以上這段代碼在網(wǎng)上很常見，通過設(shè)置html{overflow:hidden}和body{height:100%;overflow:auto}來實(shí)現(xiàn)ie6下position:fixed效果，但這種辦法有個(gè)缺陷，那就是：這會使頁面上原有的absolute、relation都變成fixed的效果，在這里我就不做demo了，如果有懷疑，可以自己去試驗(yàn)一下。
于是我找了下資料，發(fā)現(xiàn)可以通過一條Internet Explorer的CSS表達(dá)式(expression)來完美的實(shí)現(xiàn)ie6下position:fixed效果，css代碼如下：
/* 除IE6瀏覽器的通用方法 */
.ie6fixedTL{position:fixed;left:0;top:0}
.ie6fixedBR{position:fixed;right:0;bottom:0}
/* IE6瀏覽器的特有方法 */
* html .ie6fixedTL{position:absolute;left:expression(eval(document.documentElement.scrollLeft));top:expression(eval(document.documentElement.scrollTop))}
* html .ie6fixedBR{position:absolute;left:expression(eval(document.documentElement.scrollLeft+document.documentElement.clientWidth-this.offsetWidth)-(parseInt(this.currentStyle.marginLeft,10)||0)-(parseInt(this.currentStyle.marginRight,10)||0));top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)))}
上面代碼可以直接使用了，如果要設(shè)置元素懸浮邊距，要分別為設(shè)置兩次，比如我要讓某個(gè)元素距頂部10個(gè)像素，距左部也是10個(gè)像素，那就要這樣子寫：
/* 除IE6瀏覽器的通用方法 */
.ie6fixedTL{position:fixed;left:10px;top:10px}
/* IE6瀏覽器的特有方法 */
* html .ie6fixedTL{position:absolute;left:expression(eval(document.documentElement.scrollLeft+10));top:expression(eval(document.documentElement.scrollTop+10))}
這樣一來，IE6下實(shí)現(xiàn)position:fixed的效果解決了，而且也不會影響到其他的absolute、relation，但還有一個(gè)問題，就是懸浮的元素會出現(xiàn)振動
IE有一個(gè)多步的渲染進(jìn)程。當(dāng)你滾動或調(diào)整你的瀏覽器大小的時(shí)候，它將重置所有內(nèi)容并重畫頁面，這個(gè)時(shí)候它就會重新處理css表達(dá)式。這會引起一個(gè)丑陋的“振動”bug，在此處固定位置的元素需要調(diào)整以跟上你的(頁面的)滾動，于是就會“跳動”。
解決此問題的技巧就是使用background-attachment:fixed為body或html元素添加一個(gè)background-image。這就會強(qiáng)制頁面在重畫之前先處理CSS。因?yàn)槭窃谥禺嬛疤幚鞢SS，它也就會同樣在重畫之前首先處理你的CSS表達(dá)式。這將讓你實(shí)現(xiàn)完美的平滑的固定位置元素！
然后我發(fā)現(xiàn)background-image無需一張真實(shí)的圖片，設(shè)置成about:blank就行了。
下面附上完整代碼
/* 除IE6瀏覽器的通用方法 */
.ie6fixedTL{position:fixed;left:0;top:0}
.ie6fixedBR{position:fixed;right:0;bottom:0}
/* IE6瀏覽器的特有方法 */
/* 修正IE6振動bug */
* html,* html body{background-image:url(about:blank);background-attachment:fixed}
* html .ie6fixedTL{position:absolute;left:expression(eval(document.documentElement.scrollLeft));top:expression(eval(document.documentElement.scrollTop))}
* html .ie6fixedBR{position:absolute;left:expression(eval(document.documentElement.scrollLeft+document.documentElement.clientWidth-this.offsetWidth)-(parseInt(this.currentStyle.marginLeft,10)||0)-(parseInt(this.currentStyle.marginRight,10)||0));top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)))}
至于demo我想大家都看到了吧:)
IE6完美兼容position:fixed
IE6完美兼容position:fixed
手機(jī)收藏該文章
作者：胡尐睿丶
出處：
http://www.cnblogs.com/hooray如果你讀了我的文章，覺得有幫助，你可以選擇：
支付寶贊助本文版權(quán)歸作者和博客園共有，歡迎轉(zhuǎn)載，但未經(jīng)作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文連接，否則保留追究法律責(zé)任的權(quán)利。
更多分類:
前端技術(shù)標(biāo)簽:
css,
expression,
position,
fixed,
懸浮,
ie6綠色通道：
好文要頂關(guān)注我收藏該文與我聯(lián)系胡尐睿丶關(guān)注 - 8粉絲 - 1244+加關(guān)注8
2
(請您對文章做出評價(jià))
博主上一篇：
【轉(zhuǎn)載】通過JS破解圖片防盜鏈限制 博主下一篇：
借助Google Translate API實(shí)現(xiàn)網(wǎng)站多國語言翻譯功能 首頁上一篇：
實(shí)例講解遺傳算法——基于遺傳算法的自動組卷系統(tǒng)【實(shí)踐篇】 首頁下一篇：
（譯）如何使用cocos2d制作一個(gè)打地鼠的游戲：（第二部分。完）posted @ 2011-05-20 18:42
胡尐睿丶 閱讀(34189) 評論(38)
編輯收藏評論列表
#1樓 2011-05-20 21:33
sxwgf 這種方法用了expression,請教lz有不用expression的方法嗎？
支持(0)反對(0)#2樓[樓主] 2011-05-20 22:49
胡尐睿丶 @sxwgf
不用expression就是我文章開頭那短代碼，設(shè)置html{overflow:hidden}和body{height:100%;overflow:auto}，但這樣會造成頁面上所有absolute都變成fixed的效果，所以還是推薦用expression
支持(0)反對(0)#3樓 2011-05-21 07:21
劉覽器 文章很有深度，簽定完畢。。。
支持(0)反對(0)#4樓 2011-05-21 09:52
john23.net 恩學(xué)習(xí)了
支持(0)反對(0)#5樓 2011-05-21 10:57
鈞梓昊逑 我認(rèn)為這不算是BUG
支持(0)反對(0)#6樓 2011-05-21 11:45
超級奶崽 不錯(cuò)啊
支持(0)反對(0)#7樓 2011-05-21 12:17
賣身葬小強(qiáng) 禁用javascript這段css表達(dá)式會不會失效?
支持(0)反對(0)#8樓[樓主] 2011-05-21 12:43
胡尐睿丶 @賣身葬小強(qiáng)
這問題不錯(cuò)，我沒測試過，應(yīng)該是會失效的，我沒考慮到，看來還是得留個(gè)備用方案，當(dāng)IE6在禁用js的情況下，采用我文章中的第一種辦法
支持(0)反對(0)#9樓 2011-05-21 21:49
西狐 堅(jiān)定不移的，拋棄IE6
支持(0)反對(0)#10樓 2011-08-16 15:24
ilbefun 請問50%邊距要怎么寫呢
支持(0)反對(0)#11樓[樓主] 2011-08-16 15:30
胡尐睿丶 @ilbefun
什么叫50%邊距？
支持(0)反對(0)#12樓 2011-08-30 22:08
翼飛 relative寫成relation了 汗一個(gè) 這個(gè)真不應(yīng)該有
支持(0)反對(0)#13樓[樓主] 2011-08-30 22:23
胡尐睿丶 @翼飛
我的錯(cuò)，絕對是我的錯(cuò)。
支持(0)反對(0)#14樓 2011-09-22 10:04
Rex.He 真沒看出有什么完美的..expression基本都不會使用的...
樓主一點(diǎn)都不考慮性能問題...
支持(0)反對(0)#15樓[樓主] 2011-09-22 10:08
胡尐睿丶 @Rex.He
真要考慮性能，那就只能屏蔽IE6了，或者不管IE6了，但這真的是為用戶考慮么？這又回到的開頭的問題，我們考慮性能的最終目的還不是為了用戶考慮。
支持(0)反對(0)#16樓 2011-09-22 10:15
Rex.He @胡尐睿丶
屏蔽IE6？ 做東西就是為了滿足客戶需求...
expression性能損耗太大，使用position:absolute模擬會比較好
支持(0)反對(0)#17樓[樓主] 2011-09-22 10:19
胡尐睿丶 @Rex.He
是用position:absolute模擬的啊，文章里我都寫的很清楚了，但是top，left的值你要怎么計(jì)算？還不是要用JS實(shí)時(shí)計(jì)算出來。不然你怎么實(shí)現(xiàn)？
支持(0)反對(0)#18樓 2011-09-22 10:23
Rex.He expression 和 JS計(jì)算模擬 在性能上的問題
在于頻率，expression在你任何位置任何時(shí)候微小的移動都會計(jì)算很多次，你可以測試下.... JS只針對在你的使用范圍內(nèi)，所以前端才不建議使用expression
支持(0)反對(0)#19樓[樓主] 2011-09-22 10:33
胡尐睿丶 @Rex.He
原來是這樣，受教了，我一直以為expression和js沒區(qū)別，就干脆把js代碼用expression寫在css里了
支持(0)反對(0)#20樓 2011-11-23 10:49
nono_jia 會和其他的js有沖突..單用還是可以的..
支持(0)反對(0)#21樓 2012-02-21 13:58
Zigzag 真正最完美的方式，假設(shè)box需要fixed，如下
1
2
3
<div class="box">
這是需要絕對定位的文字。
</div>
使用以下css來實(shí)現(xiàn)ie6的fixed：
1
2
3
4
5
6
7
.box {
position: fixed;
}
* html .box {
position: absolute;
}
支持(0)反對(0)#22樓 2012-04-05 10:45
象牛 引用Zigzag：
真正最完美的方式，假設(shè)box需要fixed，如下
1
2
3
<div class="box">
這是需要絕對定位的文字。
</div>
使用以下css來實(shí)現(xiàn)ie6的fixed：
1
2
3
4
5
6
7
.box {
position: fixed;
}
* html .box {
position: absolute;
}
厲害?。。。。?！
支持(0)反對(0)#23樓[樓主] 2012-04-05 10:51
胡尐睿丶 @Zigzag
你這哪里解決ie6 position: fixed; 的問題了？
支持(0)反對(0)#24樓[樓主] 2012-04-05 10:51
胡尐睿丶 @象牛
演員？
支持(0)反對(0)#25樓 2012-04-05 10:54
象牛 引用Zigzag：
真正最完美的方式，假設(shè)box需要fixed，如下
1
2
3
<div class="box">
這是需要絕對定位的文字。
</div>
使用以下css來實(shí)現(xiàn)ie6的fixed：
1
2
3
4
5
6
7
.box {
position: fixed;
}
* html .box {
position: absolute;
}
呃。。。。。。。。發(fā)現(xiàn)問題了。。。發(fā)現(xiàn)IE6下不會隨屏幕動。。。或者是我沒有理解你的意思吧
支持(0)反對(0)#26樓 2012-04-13 10:03
象牛 引用胡尐睿丶：
@象牛
演員？
你說話用的著這么偏激嗎？
支持(0)反對(0)#27樓 2012-04-28 10:39
前端組qianduanzu.com 這樣比較耗資源，有沒有更好的解方案呢？
支持(0)反對(0)#28樓[樓主] 2012-04-28 10:41
胡尐睿丶 @前端組qianduanzu.com
不管IE6是最好的解決方案=D
支持(1)反對(0)#29樓 2012-04-28 10:42
前端組qianduanzu.com @胡尐睿丶
哈哈，我博客就是。沒管它IE6
支持(0)反對(0)#30樓 2012-05-03 10:28
chloe_t QAQ可惜老板用的IE6啊…………
支持(1)反對(0)#31樓 2012-06-04 11:14
天地人廣告 為什么我的下面的定位也總是跟著動？？？ WHY？？
支持(0)反對(0)#32樓[樓主] 2012-06-04 11:16
胡尐睿丶 @天地人廣告
fixed不就是跟隨滾動的
支持(0)反對(0)#33樓 2012-06-04 11:18
天地人廣告 @胡尐睿丶
我只要頂部跟著滾?。?我用你的方法下面的那些用了絕對定位的也是和頂部一樣的滾了！
支持(0)反對(0)#34樓[樓主] 2012-06-04 11:19
胡尐睿丶 @天地人廣告
檢查你的樣式，肯定有沖突了
支持(0)反對(0)#35樓 2012-06-04 11:24
天地人廣告 .ie6fixedTL{position:absolute;left:expression(eval(document.documentElement.scrollLeft+10));top:expression(eval(document.documentElement.scrollTop+10))}
是只要把這句放上就行了吧！ 把.ie6fixedTL 改成我的？？
支持(0)反對(0)#36樓 2012-10-11 14:52
iamzou Body如果本身有背景呢 而且不能fixed呢？
支持(0)反對(0)#37樓 2012-10-25 22:33
偷懶小小貓 使用以下css來實(shí)現(xiàn)ie6的fixed：
7 .box {
position: fixed;
}
* html .box {
position: absolute;
}
* html .box 這種寫法是專門針對IE6 嗎 可是我記得hack是_box{。。}吧
支持(0)反對(0)#38樓26128432013/2/2 10:39:13 2013-02-02 10:39
Moon_Jacob 想不到今天在這邊把遇到的問題解決了，哈哈
ps:當(dāng)初沒和你們好好學(xué)習(xí)真是我的損失啊
