怎么用CSS實現IE6無抖動固定定位

這篇文章主要講解了“怎么用CSS實現IE6無抖動固定定位”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“怎么用CSS實現IE6無抖動固定定位”吧！

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

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

為什么使用行為（expression）能解決問題：
因為CSS中使用expression只有IE才能識別。

實現方法：
在css中寫入js代碼：

代碼如下:

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

這樣一個，固定定位的問題解決了，但是還有問題，元素會跳動，這是為什么
IE6中的元素為什么會跳動的：
這是因為IE有一個多步的渲染進程。當你滾動或調整你的瀏覽器大小的時候，它將重置所有內容并重畫頁面，這個時候它就會重新處理css表達式，但是這是DOM結構是先于CSS展示出來，所以這會引起一個"抖動"bug，在此處固定位置的元素需要調整以跟上你的（頁面）滾動，于是就會跳動，解決此問題的技巧就是使用background-attachment:fixed為body或html元素添加一個background-image。這就會強制頁面在重畫之前先處理css。因為是在重畫之前處理CSS，它也就會同樣在重畫之前首先處理你的css表達式。這將讓你實現完美的平滑的固定位置元素！然后我發現background-image無需一張真實的圖片，設置成about:blank就行。
元素跳動的解決方法：

代碼如下:

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

感謝各位的閱讀，以上就是“怎么用CSS實現IE6無抖動固定定位”的內容了，經過本文的學習后，相信大家對怎么用CSS實現IE6無抖動固定定位這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！