IE6 position:fixed問題解決方案
作者：admin
IE6下position:fixed是老生常談的問題了，主要問題就是IE6不支持position:fixed引起的BUG，這里向大家描述一下這個問題的解決方法，希望你會感興趣。
本文向大家簡單介紹一下解決IE6下position:fixed問題方法，造成這個問題的原因是fixed元素的絕對位置是相對于HTML元素，滾動條是body元素的，相信本文介紹一定會讓你有所收獲。
***的IE6 position:fixed
這個內(nèi)容是老生常談了，主要問題就是IE6不支持position:fixed引起的BUG.當(dāng)我們?nèi)ニ阉鹘鉀Q這個bug的垮瀏覽器解決辦法時,絕大多數(shù)結(jié)果都是說使用position:absolute來替代解決,可是我們真的解決了么?沒有,因為當(dāng)頁面比較長的時候,拖動滾動條,那個fix的地方也相應(yīng)的閃動.雖然最終會近似于需求的目標(biāo),但是不***.那么如何解決這一問題呢?
造成這個問題的原因是fixed元素的絕對位置是相對于HTML元素,滾動條是body元素的(貌似ie6中他們的區(qū)別就是在于滾動條界限那里)。知道了原因,我們就大概知道如何解決了:
- <!--[ifIE6]>
- <styletypestyletype="text/css">
- html{overflow:hidden;}
- body{height:100%;overflow:auto;}
- #fixed{position:absolute;}
- </style>
- <!--[endif]-->
沒錯,就是加上這樣的一段code,現(xiàn)在看看完整的頁面code:
- <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"
- "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml">
- <head>
- <metahttp-equivmetahttp-equiv="Content-Type"
- content="text/html;charset=utf-8"/>
- <title>IE6position:fixed</title>
- <style>
- *{
- padding:0;
- margin:0;
- }
- #fixed{
- background-color:#ddd;
- border:1pxsolid#aaa;
- position:fixed;
- right:0;
- top:0;
- }
- </style>
- <!--[ifIE6]>
- <styletypestyletype="text/css">
- html{overflow:hidden;}
- body{height:100%;overflow:auto;}
- #fixed{position:absolute;right:17px;}
- </style>
- <!--[endif]-->
- </head>
- <body>
- <divstyledivstyle="height:2000px"></div>
- <dividdivid="fixed">
- FIXED
- </div>
- </body>
- </html>
【編輯推薦】
- JavaScript巧解IE6至IE8兼容問題
- CSS position屬性定義和用法
- ***實現(xiàn)IE6/IE7/FF瀏覽器兼容通用方法
- CSS屬性display:inline-block使用揭秘
- 深入探究DIV CSS布局中position屬性用法
責(zé)任編輯：佚名
來源：
flex.desizen.com
