IE6下 position fixed 相容問題

2021-06-27 19:54:04 字數 849 閱讀 9735

本文所使用的技巧是用了一條internet explorer的css表示式(expression)。你不可以直接使用該表示式,因為它可能會因為快取而不更新。解決這一點的最簡單的方式是使用eval包裹你的語句。

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

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

/*讓position:fixed在ie6下可用! */

.fixed-top /* 頭部固定 */

.fixed-bottom /* 底部固定 */

.fixed-left /* 左側固定 */

.fixed-right /* 右側固定 */

/* 上面的是除了ie6的主流瀏覽器通用的方法 */

* html,* html body /* 修正ie6振動bug */

* html .fixed-top /* ie6 頭部固定 */

* html .fixed-right /* ie6 右側固定 */

* html .fixed-bottom /* ie6 底部固定 */

* html .fixed-left /* ie6 左側固定 */

IE6下的效果

1.ie6有寬度border實現透明 如果想使得邊框顏色透明,在其餘瀏覽器下比較簡單,直接使用 border color transparent 但在ie6下這個辦法不行,可以通過下面的方式實現 border color tomato filter chroma color tomato 或者 bo...

IE6下position fixed的bug解決

參考文章 http www.qianduan.net fix ie6 dont support position fixed bug.html 頂部固定 在相應 div的 css中新增 下劃線只能被 ie6識別 position absolute bottom auto top expression...

ie6下height高度問題

無標題文件 title 6head 78 body 9 div style background blue height 8px div 10body 11html 複製 意思是定義乙個高度為8px,藍色背景的div,但是造成ie6.0下多出來高度.以前我解決ie6.0下出現的這種問題的方法是加ov...