国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁 > 開發 > CSS > 正文

CSS行為expression輕松實現IE6無抖動固定定位

2024-07-11 08:38:34
字體:
來源:轉載
供稿:網友

概述:
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;
}

發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
主站蜘蛛池模板: 轮台县| 梁河县| 邢台市| 东海县| 泸西县| 漾濞| 岳普湖县| 富宁县| 中方县| 晴隆县| 安多县| 金堂县| 双流县| 阳原县| 兴国县| 祁东县| 嘉禾县| 通山县| 双鸭山市| 谢通门县| 济阳县| 平南县| 海兴县| 望都县| 锦州市| 平顶山市| 仁寿县| 个旧市| 微山县| 诏安县| 临城县| 津市市| 安化县| 房产| 汉寿县| 大埔区| 兰州市| 玉屏| 天津市| 金秀| 邮箱|