當前主流瀏覽器中,chrome,firefox,ie7,8等想要固定乙個元素位置,不隨內容的滾動而滾動,眾所周知,css中position: fixed;即可解決。
可是要在ie6中實現固定效果,position: fixed;就不奏效了。
目前我所知的ie6下fixed的方案大概有純css和expression+js兩種,各有利弊。
1.純css法
利用了ie6下html元素外面套的乙個匿名元素,即 * ,利用選擇器層級,可以定製ie6下的效果。**如下
* html /*只是定製垂直滾動fixed*/
* html body
* html #fixedbox
此法看似成本很低,其實有個顯而易見的致命傷,就是ie6下所有position: absolute; 的元素都會被置為固定不動。於此,此法只能用於頁面木有絕對定位的元素的時候。
2.js 法
其實此法原理也很簡單,就是在ie6下利用js不斷改變absolute的元素scrolltop值,已達到類似固定的效果。例如
#fixedbox
此法也有乙個小問題,即滾動時會閃爍。
解決閃爍的辦法也很簡單,即給滾動元素的父元素(一般是body)設定乙個background-image,並把background-attachment設定為fixed。
於是,綜上,
#fixedbox
/*for ie6 */
* html body
* html #fixedbox
雖然expression會影響一定的效能,但這也不失為一種好的模擬fixed的方法。
ps:如果本身body中要設定background-image的,可以直接在html裡寫空的固定的背景圖。
解決IE6不支援position fixed屬性
最近在優化 浮動廣告時候遇見了ie6不支援position fixed屬性。上網收集了一下解決方案 比較好的方案就是利用css表示式進行解決 補充 css expression css 表示式 是一種使用動態設定 css 屬性的方式,並且被 ie5 以上的版本所支援,但是 ie8 的標準模式已不再支...
IE6 IE7 IE8共存方法
這篇文章是很久以前寫的,而現在已經有更好的解決方案了。所以現階段向你推薦的解決方案是 現階段推薦閱讀 多ie版本共存的解決方案 ietester 推薦 windows internet explorer 7 for windows xp sp2簡體中文正式版 4 將 ie7 的安裝檔案 例如 ie7...
IE6 IE7 IE8 FF相容符號
2.區別ie8 ie9 一般來說,我們寫的結構比較好的時候,ie8 9下是沒區別的.所以可能很少人關注只有ie8或只有ie9才識別的css hack.因為ie8及以下版本是不支援css3的,但是我們如果使用css3,在ie下ie9正常渲染,但我們又想讓ie8及以下的瀏覽器實現同樣的效果,且不希望使用...