網(wǎng)頁(yè)前端 - 解決IE6不支持position:fixed的問(wèn)題
前段時(shí)間因?yàn)楣镜哪硞€(gè)項(xiàng)目需要用到底部固定元素在網(wǎng)頁(yè)中隨著瀏覽器滾動(dòng)而滾動(dòng),當(dāng)然用position:fixed這個(gè)屬性來(lái)做,可是問(wèn)題來(lái)了,IE6.0下面不支持position:fixed這個(gè)屬性。
在網(wǎng)上查找資料,實(shí)踐,最終OK了,貼出來(lái)大家分享。
當(dāng)然,在IE6以上版本,火狐,谷歌等瀏覽器都是件容易的事情,直接用position:fixed這個(gè)屬性就可以搞定。如:
.top {position:fixed;bottom:auto;top:0px;} /* 頭部固定 */
.bottom {position:fixed;bottom:0px;top:auto;} /* 底部固定 */
.left {position:fixed;right:auto;left:0px;} /* 左側(cè)固定 */
.right{position:fixed;right:0px;left:auto;} /* 右側(cè)固定 */
但在IE6及以下版本這樣設(shè)置是沒(méi)用的,要設(shè)置成這樣:
body{background-image:url(about:blank);background-attachment:fixed;} /* 修正IE6振動(dòng)bug */
.top {position:absolute;bottom:auto;top:expression(eval(document.documentElement.scrollTop));} /* IE6 頭部固定*/
.left{position:absolute;left:auto;right:expression(eval(document.documentElement.scrollLeft+document.documentElement.clientWidth-this.offsetWidth)-(parseInt(this.currentStyle.marginLeft,10)||0)-(parseInt(this.currentStyle.marginRight,10)||0));} /* IE6 右側(cè)固定 */
.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 右側(cè)固定 */
.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 底部固定 */
不知道對(duì)你有沒(méi)有幫助呢?
本文地址:http://m.likemindfilms.com/tutorial/wd1514.html
您可能還喜歡
- jquery Jcrop圖像裁切插件中文api文檔
- @media適配不同尺寸的手機(jī)
- 返回上一頁(yè)代碼的幾種寫(xiě)法
- Dreamweaver CC 2014新功能介紹
- 深入了解viewport和px
- 優(yōu)秀CSS代碼書(shū)寫(xiě)的10個(gè)規(guī)范
- 畫(huà)出你的風(fēng)格:HTML5創(chuàng)意畫(huà)板的設(shè)計(jì)教程
- Div中height:100%無(wú)效的解決辦法
- 網(wǎng)頁(yè)前端-網(wǎng)頁(yè)切圖命名規(guī)范
- 為網(wǎng)頁(yè)設(shè)計(jì)師而生的14個(gè)文本編輯器
- 專訪:石墨文檔產(chǎn)品總監(jiān)羅穎
- UI設(shè)計(jì)不得不知的移動(dòng)端UI尺寸適
- 光音移動(dòng)設(shè)計(jì)規(guī)范 — 表單類
- 體驗(yàn)設(shè)計(jì)中的排序問(wèn)題
- 網(wǎng)頁(yè)設(shè)計(jì)精粹 網(wǎng)頁(yè)中那些迷人的按
- aliued:響應(yīng)式設(shè)計(jì)的現(xiàn)狀與趨勢(shì)
- 10個(gè)智能對(duì)象處理的ps技巧
- 網(wǎng)頁(yè)UI - 原子設(shè)計(jì)理論(上)
- 如何通過(guò)設(shè)計(jì)提升banner點(diǎn)擊率?
- 晉小彥視覺(jué)設(shè)計(jì)系列文章(二):全屏