CSS行為expression輕松實現(xiàn)IE6無抖動固定定位
發(fā)布時間:2014-03-03 09:33:18 作者:佚名
我要評論

IE6不支持固定定位(position:fixed)是眾所周知的事情,想在IE6做出固定定位的效果就只能用JS,用js會出現(xiàn)“跳動”的效果,下面為大家介紹下CSS中的行為expression
概述:
IE6不支持固定定位(position:fixed)是眾所周知的事情,所以我們要想在IE6做出固定定位的效果就只能用JS,但是用js會出現(xiàn)“跳動”的效果,所以有沒有不用JS而且不跳動的辦法呢?這是怎么做到的呢?今天說說CSS中的行為expression。
什么是行為-expression:
就是CSS屬性后面可以是一段JS表達式,CSS屬性的值等于JS表達式計算的結(jié)果。在表達式中可以直接引用元素自身的屬性和方法,也可以使用其他瀏覽器對象。這個表達式就好像是在這個元素的一個成員函數(shù)中一樣。
為什么使用行為(expression)能解決問題:
因為CSS中使用expression只有IE才能識別。
實現(xiàn)方法:
在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有一個多步的渲染進程。當你滾動或調(diào)整你的瀏覽器大小的時候,它將重置所有內(nèi)容并重畫頁面,這個時候它就會重新處理css表達式,但是這是DOM結(jié)構(gòu)是先于CSS展示出來,所以這會引起一個"抖動"bug,在此處固定位置的元素需要調(diào)整以跟上你的(頁面)滾動,于是就會跳動,解決此問題的技巧就是使用background-attachment:fixed為body或html元素添加一個background-image。這就會強制頁面在重畫之前先處理css。因為是在重畫之前處理CSS,它也就會同樣在重畫之前首先處理你的css表達式。這將讓你實現(xiàn)完美的平滑的固定位置元素!然后我發(fā)現(xiàn)background-image無需一張真實的圖片,設(shè)置成about:blank就行。
元素跳動的解決方法:
body {
//針對IE6在重畫之前處理CSS
_background: url(about:blank);
_background-attachment: fixed;
}
IE6不支持固定定位(position:fixed)是眾所周知的事情,所以我們要想在IE6做出固定定位的效果就只能用JS,但是用js會出現(xiàn)“跳動”的效果,所以有沒有不用JS而且不跳動的辦法呢?這是怎么做到的呢?今天說說CSS中的行為expression。
什么是行為-expression:
就是CSS屬性后面可以是一段JS表達式,CSS屬性的值等于JS表達式計算的結(jié)果。在表達式中可以直接引用元素自身的屬性和方法,也可以使用其他瀏覽器對象。這個表達式就好像是在這個元素的一個成員函數(shù)中一樣。
為什么使用行為(expression)能解決問題:
因為CSS中使用expression只有IE才能識別。
實現(xiàn)方法:
在css中寫入js代碼:
復(fù)制代碼
代碼如下:#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有一個多步的渲染進程。當你滾動或調(diào)整你的瀏覽器大小的時候,它將重置所有內(nèi)容并重畫頁面,這個時候它就會重新處理css表達式,但是這是DOM結(jié)構(gòu)是先于CSS展示出來,所以這會引起一個"抖動"bug,在此處固定位置的元素需要調(diào)整以跟上你的(頁面)滾動,于是就會跳動,解決此問題的技巧就是使用background-attachment:fixed為body或html元素添加一個background-image。這就會強制頁面在重畫之前先處理css。因為是在重畫之前處理CSS,它也就會同樣在重畫之前首先處理你的css表達式。這將讓你實現(xiàn)完美的平滑的固定位置元素!然后我發(fā)現(xiàn)background-image無需一張真實的圖片,設(shè)置成about:blank就行。
元素跳動的解決方法:
復(fù)制代碼
代碼如下:body {
//針對IE6在重畫之前處理CSS
_background: url(about:blank);
_background-attachment: fixed;
}
相關(guān)文章
CSS expression判斷表達式設(shè)置input樣式
用CSS的expression判斷表達式設(shè)置input樣式,簡單,輕量級。缺點在于expression判斷表達式FireFox是不支持的。致命的是只能區(qū)分出一個(例如例子中就只能區(qū)分出text文本框2009-06-14- CSS中寫expression可能會在Chrome中有問題.2010-01-27
優(yōu)化瀏覽器渲染 避免CSS expressions
CSS表達式會降低瀏覽器的渲染性能;用其他方案替換它們將會改善IE瀏覽器的渲染性能。2010-03-09CSS中使用expression完美設(shè)置頁面最小寬度(兼容ie)
CSS中使用expression有ie才能識別,其把CSS屬性和Javascript表達式關(guān)聯(lián)起來,效果相當于min-width,即實現(xiàn)了兼容ie,示例如下,感興趣的朋友可以參考下,希望對大家有所幫2013-07-31css expression使用概述及其優(yōu)缺點介紹
css expression(css表達式)又稱Dynamic properties(動態(tài)屬性)是早期微軟DHTML的產(chǎn)物,微軟從IE8 beta2標準模式開始,取消對css expression的支持,感興趣的朋友可以了解下2013-11-04CSS表達式(expression)解決IE6 position:fixed無效問題
IE6 position:fixed無效在做兼容時,很是頭疼,本例通過一條Internet Explorer的CSS表達式(expression)來完美的實現(xiàn)ie6下position:fixed效果,有需要的朋友可以參考下2014-07-28- 這篇文章主要介紹了CSS中使用expression表達式,需要的朋友可以參考下2014-12-22