1. 程式人生 > >IE6下position:fixed不支持問題及其解決方式

IE6下position:fixed不支持問題及其解決方式

div 網頁 this margin otto ima hack 一段 奇葩

IE6有諸多奇葩,不支持position:fixed就是當中之中的一個。所以在做一些比方固定在頂部或者底部或者固定元素的效果時須要考慮兼容IE6的這個問題。解決方式是用Ie6的hack。

*html {/* 僅僅有IE6支持 */
    background-image: url(about:blank); 
    background-attachment: fixed; /* 固定背景 */
}
#box {
    /* 非IE6瀏覽器使用固定元素 */
    position: fixed;
    top: 0;
    left: 0;
    /* IE6改為絕對定位。並通過css表達式依據滾動位置更改top的值 */
    _position: absolute;
    _top: expression(eval(document.documentElement.scrollTop));
}
這裏還須要解決的是“抖動”的問題,由於當你滾動滾動欄的時候expression下的樣式一直在又一次計算而且運行css,會產生延遲的抖動。而在使用固定背景之後,在滾動的時候先運行了css,再又一次計算網頁,所以不會產生抖動的現象。
以下是固定究竟部的代碼。須要細致看一下:

_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));
PS:在網上看到expression的諸多弊病,也是雅虎34條裏面竭力避免使用css表達式的一個重要原因,摘引一段話:表達式的問題就在於它的計算頻率要比我們想象的多。不不過在頁面顯示和縮放時。就是在頁面滾動、乃至移動鼠標時都會要又一次計算一次。

給CSS表達式添加一個計數器能夠跟蹤表達式的計算頻率。

在頁面中隨便移動鼠標都能夠輕松達到10000次以上的計算量。由此可見一斑。




IE6下position:fixed不支持問題及其解決方式