IE6 position:fixed問題解決方案
作者：admin
IE6下position:fixed是老生常談的問題了，主要問題就是IE6不支持position:fixed引起的BUG，這里向大家描述一下這個(gè)問題的解決方法，希望你會(huì)感興趣。
本文向大家簡(jiǎn)單介紹一下解決IE6下position:fixed問題方法，造成這個(gè)問題的原因是fixed元素的絕對(duì)位置是相對(duì)于HTML元素，滾動(dòng)條是body元素的，相信本文介紹一定會(huì)讓你有所收獲。
***的IE6 position:fixed
這個(gè)內(nèi)容是老生常談了，主要問題就是IE6不支持position:fixed引起的BUG.當(dāng)我們?nèi)ニ阉鹘鉀Q這個(gè)bug的垮瀏覽器解決辦法時(shí),絕大多數(shù)結(jié)果都是說使用position:absolute來替代解決,可是我們真的解決了么?沒有,因?yàn)楫?dāng)頁面比較長(zhǎng)的時(shí)候,拖動(dòng)滾動(dòng)條,那個(gè)fix的地方也相應(yīng)的閃動(dòng).雖然最終會(huì)近似于需求的目標(biāo),但是不***.那么如何解決這一問題呢?
造成這個(gè)問題的原因是fixed元素的絕對(duì)位置是相對(duì)于HTML元素,滾動(dòng)條是body元素的(貌似ie6中他們的區(qū)別就是在于滾動(dòng)條界限那里)。知道了原因,我們就大概知道如何解決了:
- <!--[ifIE6]>
- <styletypestyletype="text/css">
- html{overflow:hidden;}
- body{height:100%;overflow:auto;}
- #fixed{position:absolute;}
- </style>
- <!--[endif]-->
沒錯(cuò),就是加上這樣的一段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屬性定義和用法
- ***實(shí)現(xiàn)IE6/IE7/FF瀏覽器兼容通用方法
- CSS屬性display:inline-block使用揭秘
- 深入探究DIV CSS布局中position屬性用法
責(zé)任編輯：佚名
來源：
flex.desizen.com
