完美解決IE6不能相容position fixed

2021-07-02 02:03:42 字數 1724 閱讀 9387

html>以上這段**在網上很常見,通過設定html和body來實現ie6下position:fixed效果,但這種辦法有個缺陷,那就是:這會使頁面上原有的absolute、relation都變成fixed的效果,在這裡我就不做demo了,如果有懷疑,可以自己去試驗一下。

於是我找了下資料,發現可以通過一條internet explorer的css表示式(expression)來完美的實現ie6下position:fixed效果,css**如下: 

/* 除ie6瀏覽器的通用方法 */

.ie6fixedtl

.ie6fixedbr

/* ie6瀏覽器的特有方法 */

* html

.ie6fixedtl

* html

.ie6fixedbr

上面**可以直接使用了,如果要設定元素懸浮邊距,要分別為設定兩次,比如我要讓某個元素距頂部10個畫素,距左部也是10個畫素,那就要這樣子寫:

/* 除ie6瀏覽器的通用方法 */

.ie6fixedtl

/* ie6瀏覽器的特有方法 */

* html

.ie6fixedtl

這樣一來,ie6下實現position:fixed的效果解決了,而且也不會影響到其他的absolute、relation,但還有乙個問題,就是懸浮的元素會出現振動

ie有乙個多步的渲染程序。當你滾動或調整你的瀏覽器大小的時候,它將重置所有內容並重畫頁面,這個時候它就會重新處理css表示式。這會引起乙個醜陋的「振動」bug,在此處固定位置的元素需要調整以跟上你的(頁面的)滾動,於是就會「跳動」。 

解決此問題的技巧就是使用background-attachment:fixed為body或html元素新增乙個background-image。這就會強制頁面在重畫之前先處理css。因為是在重畫之前處理css,它也就會同樣在重畫之前首先處理你的css表示式。這將讓你實現完美的平滑的固定位置元素! 

然後我發現background-image無需一張真實的,設定成about:blank就行了。

下面附上完整**

/* 除ie6瀏覽器的通用方法 */

.ie6fixedtl

.ie6fixedbr

/* ie6瀏覽器的特有方法 */

/* 修正ie6振動bug */

* html,* html

body

* html

.ie6fixedtl

* html

.ie6fixedbr

{position:absolute

;left:expression(eval(document.documentelement.scrolllef

完美解決IE6不支援position fixed

廢話不多說,先看一下下面這段 以上這段 在網上很常見,通過設定html和body來實現ie6下position fixed效果,但這種辦法有個缺陷,那就是 這會使頁面上原有的absolute relation都變成fixed的效果,在這裡我就不做demo了,如果有懷疑,可以自己去試驗一下。於是我找了...

position fixed 相容ie6問題

最近做專案時用了 來固定div在頁面的最下方,且不隨滾動條滾動而滾動。由於ie6不支援fixed,所以加了 postion absolute bottom expression offsetparent.scrolltop 20 來做相容,此段 在測試頁面ie 6 8都沒問題,但是在專案裡在ie7裡...

IE6常見BUG相容解決方法

開發前端的同學一定都知道,ie6是相容bug最多的瀏覽器,它不支援png alpha通道暫且不論。其文件的解析理解規範也引起了諸多惱人的bug,有時甚至讓人感到絕望。本文主要講解一些比較容易遇到的ie6bug,以及解決的辦法。一 ie6雙倍邊距bug 當頁面上的元素使用float浮動時,不管是向左還...