IE6 position:fixed問題解決方案

作者：admin 2010-09-15 14:14:29

IE6下position:fixed是老生常談的問題了，主要問題就是IE6不支持position:fixed引起的BUG，這里向大家描述一下這個問題的解決方法，希望你會感興趣。

本文向大家簡單介紹一下解決IE6下position:fixed問題方法，造成這個問題的原因是fixed元素的絕對位置是相對于HTML元素，滾動條是body元素的，相信本文介紹一定會讓你有所收獲。

***的IE6 position:fixed

這個內(nèi)容是老生常談了，主要問題就是IE6不支持position:fixed引起的BUG.當我們?nèi)ニ阉鹘鉀Q這個bug的垮瀏覽器解決辦法時,絕大多數(shù)結(jié)果都是說使用position:absolute來替代解決,可是我們真的解決了么?沒有,因為當頁面比較長的時候,拖動滾動條,那個fix的地方也相應(yīng)的閃動.雖然最終會近似于需求的目標,但是不***.那么如何解決這一問題呢?

造成這個問題的原因是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

IE6 position

成人免费xxxxx在线视频软件_久久精品久久久_亚洲国产精品久久久_天天色天天色_亚洲人成一区_欧美一级欧美三级在线观看

IE6 position:fixed問題解決方案