怎么用CSS實(shí)現(xiàn)IE6無(wú)抖動(dòng)固定定位

這篇文章主要講解了“怎么用CSS實(shí)現(xiàn)IE6無(wú)抖動(dòng)固定定位”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“怎么用CSS實(shí)現(xiàn)IE6無(wú)抖動(dòng)固定定位”吧！

概述：
IE6不支持固定定位（position:fixed）是眾所周知的事情，所以我們要想在IE6做出固定定位的效果就只能用JS，但是用js會(huì)出現(xiàn)“跳動(dòng)”的效果，所以有沒(méi)有不用JS而且不跳動(dòng)的辦法呢？這是怎么做到的呢？今天說(shuō)說(shuō)CSS中的行為expression。

什么是行為-expression:
就是CSS屬性后面可以是一段JS表達(dá)式，CSS屬性的值等于JS表達(dá)式計(jì)算的結(jié)果。在表達(dá)式中可以直接引用元素自身的屬性和方法，也可以使用其他瀏覽器對(duì)象。這個(gè)表達(dá)式就好像是在這個(gè)元素的一個(gè)成員函數(shù)中一樣。

為什么使用行為（expression）能解決問(wèn)題：
因?yàn)镃SS中使用expression只有IE才能識(shí)別。

實(shí)現(xiàn)方法：
在css中寫(xiě)入js代碼：

代碼如下:

#backtop{
width: 40px;
height: 45px;
position:fixed;
right: 0px;
bottom: 10px;
z-index: 9;
//針對(duì)IE6
_position:absolute;
_top:expression(eval(document.documentElement.scrollTop + 430));
border: none;
overflow:hidden;
}

這樣一個(gè)，固定定位的問(wèn)題解決了，但是還有問(wèn)題，元素會(huì)跳動(dòng)，這是為什么
IE6中的元素為什么會(huì)跳動(dòng)的：
這是因?yàn)镮E有一個(gè)多步的渲染進(jìn)程。當(dāng)你滾動(dòng)或調(diào)整你的瀏覽器大小的時(shí)候，它將重置所有內(nèi)容并重畫(huà)頁(yè)面，這個(gè)時(shí)候它就會(huì)重新處理css表達(dá)式，但是這是DOM結(jié)構(gòu)是先于CSS展示出來(lái)，所以這會(huì)引起一個(gè)"抖動(dòng)"bug，在此處固定位置的元素需要調(diào)整以跟上你的（頁(yè)面）滾動(dòng)，于是就會(huì)跳動(dòng)，解決此問(wèn)題的技巧就是使用background-attachment:fixed為body或html元素添加一個(gè)background-image。這就會(huì)強(qiáng)制頁(yè)面在重畫(huà)之前先處理css。因?yàn)槭窃谥禺?huà)之前處理CSS，它也就會(huì)同樣在重畫(huà)之前首先處理你的css表達(dá)式。這將讓你實(shí)現(xiàn)完美的平滑的固定位置元素！然后我發(fā)現(xiàn)background-image無(wú)需一張真實(shí)的圖片，設(shè)置成about:blank就行。
元素跳動(dòng)的解決方法：

代碼如下:

body {
//針對(duì)IE6在重畫(huà)之前處理CSS
_background: url(about:blank);
_background-attachment: fixed;
}

感謝各位的閱讀，以上就是“怎么用CSS實(shí)現(xiàn)IE6無(wú)抖動(dòng)固定定位”的內(nèi)容了，經(jīng)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)怎么用CSS實(shí)現(xiàn)IE6無(wú)抖動(dòng)固定定位這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！