ie6 position-fixed效果

2024-07-11 08:44:47

字體：大中小

供稿：網(wǎng)友

1、參與測試的瀏覽器：IE6 / IE7 / IE8 / FF3 / OP9.6 / SF3 / Chrome2
2、操作系統(tǒng)：Windows
我喜歡position:fixed，它很酷。但ie6總不支持它，所以用其他的屬性來模擬（這個(gè)模擬在主流瀏覽器中都兼容，所以其他瀏覽器也不需要分開寫position:fixed了）。
看效果先：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <meta name="author" content="Chomo" /> <title>模擬position:fixed</title> </head> <style> * { padding:0; margin:0;} body { height:100%; overflow:hidden; font-size:14px; line-height:2; position:relative;} html { height:100%; overflow:hidden;} .fixed { position:absolute; top:10px; left:10px; width:200px; height:350px; background:#fc0; border:1px solid #f60;} .wrapper { height:100%; overflow:auto;} .body { padding-top:10px; margin-left:232px;} </style> <body> <div class="fixed">滾動(dòng)條就算蹦達(dá)出窗口它都不會動(dòng)的</div> <div class="wrapper"> <div class="body"> [專業(yè) &raquo; 產(chǎn)業(yè)觀察] 彩虹顯IP怕成被告？TX給彩虹暗示？ jarry 2008-11-17  [專業(yè) &raquo; 產(chǎn)業(yè)觀察] 上海東樓Kappa女：互聯(lián)網(wǎng)的作用＝炒作？ jarry 2008-11-13  [專業(yè) &raquo; 產(chǎn)業(yè)觀察] 全球性商務(wù)人脈網(wǎng)絡(luò)平臺：XING.com jarry 2008-11-1  [專業(yè) &raquo; 產(chǎn)業(yè)觀察] 什么是口碑營銷？ jarry 2008-10-17  [專業(yè) &raquo; 產(chǎn)業(yè)觀察] 第二屆 Open Web 大賽開幕 jarry 2008-10-16  [專業(yè) &raquo; 產(chǎn)業(yè)觀察] 百度有啊C2C網(wǎng)絡(luò)交易平臺即將上線 jarry 2008-10-12  [專業(yè) &raquo; 產(chǎn)業(yè)觀察] 首款谷歌Android手機(jī)高調(diào)上市 jarry 2008-10-10  [專業(yè) &raquo; 產(chǎn)業(yè)觀察] 七個(gè)獲得訂閱用戶的黑色真理 jarry 2008-10-8  [專業(yè) &raquo; 產(chǎn)業(yè)觀察] 靠寫博客賺錢的五個(gè)必要條件 jarry 2008-10-7  [專業(yè) &raquo; 產(chǎn)業(yè)觀察] Windows Live Messenger 9 Wave3 最終發(fā)布日期確定 jarry 2008-10-6  [專業(yè) &raquo; 產(chǎn)業(yè)觀察] 2008中國互聯(lián)網(wǎng)大會昨日開幕 jarry 2008-9-24  [專業(yè) &raquo; 產(chǎn)業(yè)觀察] 有道熱聞上線！ jarry 2008-9-19  [專業(yè) &raquo; 產(chǎn)業(yè)觀察] Phpcms 2008 測試版9月1日開源免費(fèi)發(fā)布 jarry 2008-9-17  [專業(yè) &raquo; 產(chǎn)業(yè)觀察] 電腦報(bào)介紹的adobe air應(yīng)用 jarry 2008-9-10  [專業(yè) &raquo; 產(chǎn)業(yè)觀察] WordCamp China 2008即將召開 jarry 2008-8-28  [專業(yè) &raquo; 產(chǎn)業(yè)觀察] 開發(fā)硬件防火墻的主要步驟 jarry 2008-8-11  [專業(yè) &raquo; 產(chǎn)業(yè)觀察] 細(xì)數(shù)20個(gè)Windows 7應(yīng)該擁有的功能 - Windows 7之家--iWindows7.com jarry 2008-8-6  [專業(yè) &raquo; 產(chǎn)業(yè)觀察] 互聯(lián)網(wǎng)運(yùn)營者和互聯(lián)網(wǎng)評論者 jarry 2008-6-22  [專業(yè) &raquo; 產(chǎn)業(yè)觀察] 有趣的BlogBus暫停服務(wù)提示 jarry 2008-6-12  [專業(yè) &raquo; 產(chǎn)業(yè)觀察] 誰收入最高？程序員收入大比拼 jarry 2008-6-11  [專業(yè) &raquo; 產(chǎn)業(yè)觀察] Blog營銷的特征 jarry 2008-6-10  [專業(yè) &raquo; 產(chǎn)業(yè)觀察] 推薦一個(gè)文內(nèi)廣告平臺：群視 jarry 2008-6-8  [專業(yè) &raquo; 產(chǎn)業(yè)觀察] Google官方解釋為何更換小圖標(biāo) jarry 2008-6-8  [專業(yè) &raquo; 產(chǎn)業(yè)觀察] 二十年前的1GB jarry 2008-6-8  [專業(yè) &raquo; 產(chǎn)業(yè)觀察] 【pr=7，震古鑠今，PR=8，天人合一】PR境界談 jarry 2008-6-8  [專業(yè) &raquo; 產(chǎn)業(yè)觀察] 大網(wǎng)站謊言，你有沒有被欺騙過 jarry 2008-6-8  [專業(yè) &raquo; 產(chǎn)業(yè)觀察] blog.35免費(fèi)綁定域名的wp服務(wù) jarry 2008-6-7  [專業(yè) &raquo; 產(chǎn)業(yè)觀察] 騰訊SNS：QQ校友開始內(nèi)測 jarry 2008-6-7  [專業(yè) &raquo; 產(chǎn)業(yè)觀察] 衡量博客價(jià)值七個(gè)指標(biāo) jarry 2008-6-6  [專業(yè) &raquo; 產(chǎn)業(yè)觀察] 另類思維：百度是嫖客 我（站長）要學(xué)會做小姐 jarry 2008-6-6  [專業(yè) &raquo; 產(chǎn)業(yè)觀察] 中國電信承接CDMA后的運(yùn)營策略 jarry 2008-6-5  [專業(yè) &raquo; 產(chǎn)業(yè)觀察] 微軟新系統(tǒng)Windows 7桌面截圖（16pics） jarry 2008-6-5  [專業(yè) &raquo; 產(chǎn)業(yè)觀察] 3G門戶：無線互聯(lián)網(wǎng)門戶網(wǎng)站 jarry 2008-6-5  [專業(yè) &raquo; 產(chǎn)業(yè)觀察] Retaggr：個(gè)性化名片制作 jarry 2008-6-3  [專業(yè) &raquo; 產(chǎn)業(yè)觀察] Acrobat：Adobe的網(wǎng)絡(luò)辦公室 jarry 2008-6-3  [專業(yè) &raquo; 產(chǎn)業(yè)觀察] 影響博客互動(dòng)運(yùn)營的八大因素 jarry 2008-6-2  [專業(yè) &raquo; 產(chǎn)業(yè)觀察] 影響中國人通訊習(xí)慣的十家公司 jarry 2008-6-2  [專業(yè) &raquo; 產(chǎn)業(yè)觀察] 5月瀏覽器大戰(zhàn)升級 FireFox 3份額提升 jarry 2008-6-2  [專業(yè) &raquo; 產(chǎn)業(yè)觀察] 為什么很多博客賺不到錢? jarry 2008-5-31  [專業(yè) &raquo; 產(chǎn)業(yè)觀察] VIA OpenBook迷你筆記本實(shí)物圖 jarry 2008-5-31  [專業(yè) &raquo; 產(chǎn)業(yè)觀察] 人肉搜索：天使還是魔鬼？ jarry 2008-5-30  [專業(yè) &raquo; 產(chǎn)業(yè)觀察] 360doc：個(gè)人圖書館，網(wǎng)頁在線收藏 jarry 2008-5-30  [專業(yè) &raquo; 產(chǎn)業(yè)觀察] 時(shí)光網(wǎng)：電影、社區(qū)、你和我 jarry 2008-5-30  [專業(yè) &raquo; 產(chǎn)業(yè)觀察] 十大最讓人惱火的軟件 jarry 2008-5-27  [專業(yè) &raquo; 產(chǎn)業(yè)觀察] 付錢讓員工辭職，Zappos 的成功秘訣 jarry 2008-5-27  [專業(yè) &raquo; 產(chǎn)業(yè)觀察] 三部委發(fā)布電信業(yè)重組公告 完成后發(fā)三張3G牌照 jarry 2008-5-25  [專業(yè) &raquo; 產(chǎn)業(yè)觀察] QQ網(wǎng)絡(luò)硬盤網(wǎng)頁版秘密發(fā)布 jarry 2008-5-25  [專業(yè) &raquo; 產(chǎn)業(yè)觀察] Google Sites開始向所有人免費(fèi)開放 建立自己的個(gè)人主頁 jarry 2008-5-23  [專業(yè) &raquo; 產(chǎn)業(yè)觀察] 10個(gè)不為人知的Google失敗作品 jarry 2008-5-22  [專業(yè) &raquo; 產(chǎn)業(yè)觀察] C2Call：基于Web瀏覽器的網(wǎng)絡(luò)電話服務(wù) jarry 2008-5-21  [專業(yè) &raquo; 產(chǎn)業(yè)觀察] 微軟放棄Vista 用Windows 7取而代之 jarry 2008-5-21  [專業(yè) &raquo; 產(chǎn)業(yè)觀察] 2008年不可錯(cuò)過的Web2.0產(chǎn)品 jarry 2008-5-21  [專業(yè) &raquo; 產(chǎn)業(yè)觀察] 在 Google Earth 上看新聞 jarry 2008-5-21  [專業(yè) &raquo; 產(chǎn)業(yè)觀察] 全國哀悼日CCTV啟用wenchuan.cn域名 jarry 2008-5-20  [專業(yè) &raquo; 產(chǎn)業(yè)觀察] 微軟抗衡谷歌計(jì)劃:200億并購Facebook jarry 2008-5-20  [專業(yè) &raquo; 產(chǎn)業(yè)觀察] 還有什么不能賣？－ebay 十大火星拍賣 jarry 2008-5-19  [專業(yè) &raquo; 產(chǎn)業(yè)觀察] 互聯(lián)網(wǎng)營銷——互聯(lián)網(wǎng)是手段，營銷才是本質(zhì) jarry 2008-5-13  [專業(yè) &raquo; 產(chǎn)業(yè)觀察] 中移動(dòng)手機(jī)郵箱也抄襲？ jarry 2007-11-2  [專業(yè) &raquo; 產(chǎn)業(yè)觀察] TNND，要徹底放棄MSN了。 jarry 2007-6-11  [專業(yè) &raquo; 產(chǎn)業(yè)觀察] 好玩的在線工具 jarry 2006-11-11  [專業(yè) &raquo; 產(chǎn)業(yè)觀察] 讓收費(fèi)網(wǎng)站去死吧，用google 突破！！ jarry 2005-11-20  </div> </div> </body> </html>

提示：您可以先修改部分代碼再運(yùn)行

這是基于這種方法做的對聯(lián)效果：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <meta name="author" content="Chomo" /> <title>利用模擬的position:fixed做的對聯(lián)</title> </head> <style> * { padding:0; margin:0;} body { height:100%; overflow:hidden; font-size:14px; line-height:2; position:relative;} html { height:100%; overflow:hidden;} .fixed { position:absolute; top:10px; left:50%; width:100px; margin-left:-490px; height:350px; background:#fc0; border:1px solid #f60;} .fixed2 { position:absolute; top:10px; left:50%; width:100px; margin-left:370px; height:350px; background:#fc0; border:1px solid #f60;} .wrapper { height:100%; overflow:auto; overflow-y:scroll;} .body { width:700px; margin:0 auto; background:#f2f2f2; padding:20px;} </style> <body> <div class="fixed">豬堅(jiān)強(qiáng)</div> <div class="fixed2">又一個(gè)豬堅(jiān)強(qiáng)</div> <div class="wrapper"> <div class="body"> [專業(yè) &raquo; 產(chǎn)業(yè)觀察] 彩虹顯IP怕成被告？TX給彩虹暗示？ jarry 2008-11-17  [專業(yè) &raquo; 產(chǎn)業(yè)觀察] 上海東樓Kappa女：互聯(lián)網(wǎng)的作用＝炒作？ jarry 2008-11-13  [專業(yè) &raquo; 產(chǎn)業(yè)觀察] 全球性商務(wù)人脈網(wǎng)絡(luò)平臺：XING.com jarry 2008-11-1  [專業(yè) &raquo; 產(chǎn)業(yè)觀察] 什么是口碑營銷？ jarry 2008-10-17  [專業(yè) &raquo; 產(chǎn)業(yè)觀察] 第二屆 Open Web 大賽開幕 jarry 2008-10-16  [專業(yè) &raquo; 產(chǎn)業(yè)觀察] 百度有啊C2C網(wǎng)絡(luò)交易平臺即將上線 jarry 2008-10-12  [專業(yè) &raquo; 產(chǎn)業(yè)觀察] 首款谷歌Android手機(jī)高調(diào)上市 jarry 2008-10-10  [專業(yè) &raquo; 產(chǎn)業(yè)觀察] 七個(gè)獲得訂閱用戶的黑色真理 jarry 2008-10-8  [專業(yè) &raquo; 產(chǎn)業(yè)觀察] 靠寫博客賺錢的五個(gè)必要條件 jarry 2008-10-7  [專業(yè) &raquo; 產(chǎn)業(yè)觀察] Windows Live Messenger 9 Wave3 最終發(fā)布日期確定 jarry 2008-10-6  [專業(yè) &raquo; 產(chǎn)業(yè)觀察] 2008中國互聯(lián)網(wǎng)大會昨日開幕 jarry 2008-9-24  [專業(yè) &raquo; 產(chǎn)業(yè)觀察] 有道熱聞上線！ jarry 2008-9-19  [專業(yè) &raquo; 產(chǎn)業(yè)觀察] Phpcms 2008 測試版9月1日開源免費(fèi)發(fā)布 jarry 2008-9-17  [專業(yè) &raquo; 產(chǎn)業(yè)觀察] 電腦報(bào)介紹的adobe air應(yīng)用 jarry 2008-9-10  [專業(yè) &raquo; 產(chǎn)業(yè)觀察] WordCamp China 2008即將召開 jarry 2008-8-28  [專業(yè) &raquo; 產(chǎn)業(yè)觀察] 開發(fā)硬件防火墻的主要步驟 jarry 2008-8-11  [專業(yè) &raquo; 產(chǎn)業(yè)觀察] 細(xì)數(shù)20個(gè)Windows 7應(yīng)該擁有的功能 - Windows 7之家--iWindows7.com jarry 2008-8-6  [專業(yè) &raquo; 產(chǎn)業(yè)觀察] 互聯(lián)網(wǎng)運(yùn)營者和互聯(lián)網(wǎng)評論者 jarry 2008-6-22  [專業(yè) &raquo; 產(chǎn)業(yè)觀察] 有趣的BlogBus暫停服務(wù)提示 jarry 2008-6-12  [專業(yè) &raquo; 產(chǎn)業(yè)觀察] 誰收入最高？程序員收入大比拼 jarry 2008-6-11  [專業(yè) &raquo; 產(chǎn)業(yè)觀察] Blog營銷的特征 jarry 2008-6-10  [專業(yè) &raquo; 產(chǎn)業(yè)觀察] 推薦一個(gè)文內(nèi)廣告平臺：群視 jarry 2008-6-8  [專業(yè) &raquo; 產(chǎn)業(yè)觀察] Google官方解釋為何更換小圖標(biāo) jarry 2008-6-8  [專業(yè) &raquo; 產(chǎn)業(yè)觀察] 二十年前的1GB jarry 2008-6-8  [專業(yè) &raquo; 產(chǎn)業(yè)觀察] 【pr=7，震古鑠今，PR=8，天人合一】PR境界談 jarry 2008-6-8  [專業(yè) &raquo; 產(chǎn)業(yè)觀察] 大網(wǎng)站謊言，你有沒有被欺騙過 jarry 2008-6-8  [專業(yè) &raquo; 產(chǎn)業(yè)觀察] blog.35免費(fèi)綁定域名的wp服務(wù) jarry 2008-6-7  [專業(yè) &raquo; 產(chǎn)業(yè)觀察] 騰訊SNS：QQ校友開始內(nèi)測 jarry 2008-6-7  [專業(yè) &raquo; 產(chǎn)業(yè)觀察] 衡量博客價(jià)值七個(gè)指標(biāo) jarry 2008-6-6  [專業(yè) &raquo; 產(chǎn)業(yè)觀察] 另類思維：百度是嫖客 我（站長）要學(xué)會做小姐 jarry 2008-6-6  [專業(yè) &raquo; 產(chǎn)業(yè)觀察] 中國電信承接CDMA后的運(yùn)營策略 jarry 2008-6-5  [專業(yè) &raquo; 產(chǎn)業(yè)觀察] 微軟新系統(tǒng)Windows 7桌面截圖（16pics） jarry 2008-6-5  [專業(yè) &raquo; 產(chǎn)業(yè)觀察] 3G門戶：無線互聯(lián)網(wǎng)門戶網(wǎng)站 jarry 2008-6-5  [專業(yè) &raquo; 產(chǎn)業(yè)觀察] Retaggr：個(gè)性化名片制作 jarry 2008-6-3  [專業(yè) &raquo; 產(chǎn)業(yè)觀察] Acrobat：Adobe的網(wǎng)絡(luò)辦公室 jarry 2008-6-3  [專業(yè) &raquo; 產(chǎn)業(yè)觀察] 影響博客互動(dòng)運(yùn)營的八大因素 jarry 2008-6-2  [專業(yè) &raquo; 產(chǎn)業(yè)觀察] 影響中國人通訊習(xí)慣的十家公司 jarry 2008-6-2  [專業(yè) &raquo; 產(chǎn)業(yè)觀察] 5月瀏覽器大戰(zhàn)升級 FireFox 3份額提升 jarry 2008-6-2  [專業(yè) &raquo; 產(chǎn)業(yè)觀察] 為什么很多博客賺不到錢? jarry 2008-5-31  [專業(yè) &raquo; 產(chǎn)業(yè)觀察] VIA OpenBook迷你筆記本實(shí)物圖 jarry 2008-5-31  [專業(yè) &raquo; 產(chǎn)業(yè)觀察] 人肉搜索：天使還是魔鬼？ jarry 2008-5-30  [專業(yè) &raquo; 產(chǎn)業(yè)觀察] 360doc：個(gè)人圖書館，網(wǎng)頁在線收藏 jarry 2008-5-30  [專業(yè) &raquo; 產(chǎn)業(yè)觀察] 時(shí)光網(wǎng)：電影、社區(qū)、你和我 jarry 2008-5-30  [專業(yè) &raquo; 產(chǎn)業(yè)觀察] 十大最讓人惱火的軟件 jarry 2008-5-27  [專業(yè) &raquo; 產(chǎn)業(yè)觀察] 付錢讓員工辭職，Zappos 的成功秘訣 jarry 2008-5-27  [專業(yè) &raquo; 產(chǎn)業(yè)觀察] 三部委發(fā)布電信業(yè)重組公告 完成后發(fā)三張3G牌照 jarry 2008-5-25  [專業(yè) &raquo; 產(chǎn)業(yè)觀察] QQ網(wǎng)絡(luò)硬盤網(wǎng)頁版秘密發(fā)布 jarry 2008-5-25  [專業(yè) &raquo; 產(chǎn)業(yè)觀察] Google Sites開始向所有人免費(fèi)開放 建立自己的個(gè)人主頁 jarry 2008-5-23  [專業(yè) &raquo; 產(chǎn)業(yè)觀察] 10個(gè)不為人知的Google失敗作品 jarry 2008-5-22  [專業(yè) &raquo; 產(chǎn)業(yè)觀察] C2Call：基于Web瀏覽器的網(wǎng)絡(luò)電話服務(wù) jarry 2008-5-21  [專業(yè) &raquo; 產(chǎn)業(yè)觀察] 微軟放棄Vista 用Windows 7取而代之 jarry 2008-5-21  [專業(yè) &raquo; 產(chǎn)業(yè)觀察] 2008年不可錯(cuò)過的Web2.0產(chǎn)品 jarry 2008-5-21  [專業(yè) &raquo; 產(chǎn)業(yè)觀察] 在 Google Earth 上看新聞 jarry 2008-5-21  [專業(yè) &raquo; 產(chǎn)業(yè)觀察] 全國哀悼日CCTV啟用wenchuan.cn域名 jarry 2008-5-20  [專業(yè) &raquo; 產(chǎn)業(yè)觀察] 微軟抗衡谷歌計(jì)劃:200億并購Facebook jarry 2008-5-20  [專業(yè) &raquo; 產(chǎn)業(yè)觀察] 還有什么不能賣？－ebay 十大火星拍賣 jarry 2008-5-19  [專業(yè) &raquo; 產(chǎn)業(yè)觀察] 互聯(lián)網(wǎng)營銷——互聯(lián)網(wǎng)是手段，營銷才是本質(zhì) jarry 2008-5-13  [專業(yè) &raquo; 產(chǎn)業(yè)觀察] 中移動(dòng)手機(jī)郵箱也抄襲？ jarry 2007-11-2  [專業(yè) &raquo; 產(chǎn)業(yè)觀察] TNND，要徹底放棄MSN了。 jarry 2007-6-11  [專業(yè) &raquo; 產(chǎn)業(yè)觀察] 好玩的在線工具 jarry 2006-11-11  [專業(yè) &raquo; 產(chǎn)業(yè)觀察] 讓收費(fèi)網(wǎng)站去死吧，用google 突破！！ jarry 2005-11-20  </div> </div> </body> </html>

提示：您可以先修改部分代碼再運(yùn)行

原理如下：

提示：您可以先修改部分代碼再運(yùn)行

把框框的高寬都擴(kuò)大到100%，然后將雷打不動(dòng)的文字定個(gè)位就行了。

上一篇：css 限定GridView寬度并加上滾動(dòng)條

下一篇：css 書寫技巧 CSS 技巧教程