IE6 的 position:fixed Hack

IE6 的 position:fixed Hack

[css]html, body {height: 100%;overflow: auto; } /* IE6 never init html,body have element’s width,height.. */
div{position:absolute;} /* IE6 browser */
body>div{position:fixed;} /* for other browser */ [/css]

IE6 的 position:fixed 是無效的, 可是能夠使用 position:absolute;
而且加上 HTML, Body 等基本 element 也可以擁有自己的 width/height 成為 display:element 中的一員(…本來就是)
只是 IE 6 中 HTML, Body 是沒有 width/height 值的, 所以得自己於css 中寫入.

本代碼能實現 IE 6 fixed 的原因在於 <HTML> 這個 Tag 被固定了.
而原本不應該有 Scroll 的 Body 則子代母職的用了 overflow:auto; 此時 body 超出 <Html> 的高度時
則觸發了 overflow scroll. 故好像能解決問題以的.
但版本如有太複雜則可能失控
e.g. 可能只是希望 nodes absolut,top=0,left=0 的依靠其 relative 的 parent. 於 IE6 中則變為在瀏覽器的左上角.

改良一下的寫法

[css]
html,body{margin:0px;padding:0px;height:100%;} /* for all browser */
html{_overflow:hidden;} /* only for IE6 */
body{_overflow:auto;} /* only for IE6 */
.fixPosition{ position:fixed; _position:absolute; } /* use this for class */
[/css]

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

*

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料