IE6 position:fixed问题解决方案-position: fixed;

本文向大家简单介绍一下解决IE6下position:fixed问题方法，造成这个问题的原因是fixed元素的绝对位置是相对于HTML元素，滚动条是body元素的，相信本文介绍一定会让你有所收获。

***的IE6 position:fixed

这个内容是老生常谈了，主要问题就是IE6不支持position:fixed引起的BUG.当我们去搜索解决这个bug的垮浏览器解决办法时,绝大多数结果都是说使用position:absolute来替代解决,可是我们真的解决了么?没有,因为当页面比较长的时候,拖动滚动条,那个fix的地方也相应的闪动.虽然最终会近似于需求的目标,但是不***.那么如何解决这一问题呢?

造成这个问题的原因是fixed元素的绝对位置是相对于HTML元素,滚动条是body元素的(貌似ie6中他们的区别就是在于滚动条界限那里)。知道了原因,我们就大概知道如何解决了:

<!--[ifIE6]> 
<styletypestyletype="text/css"> 
 html{overflow:hidden;}  
 body{height:100%;overflow:auto;}  
 #fixed{position:absolute;}  
</style> 
<!--[endif]-->

没错,就是加上这样的一段code,现在看看完整的页面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>

【编辑推荐】