完美的IE6 position:fixed

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

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

 

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

没错,就是加上这样的一段code,现在看看完整的页面code:

 

 

代码

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< meta http-equiv ="Content-Type" content ="text/html; charset=utf-8" />
< title > IE6 position:fixed </ title >
< style >
* {
padding : 0 ;
margin : 0 ;
}

#fixed {
background-color : #ddd ;
border : 1px solid #aaa ;
position : fixed ;
right : 0 ;
top : 0 ;
}
</ style >
<!-- [if IE 6]>
<style type="text/css">
html{overflow:hidden;}
body{height:100%;overflow:auto;}
#fixed{position:absolute;right:17px;}
</style>
<!--[endif] -->
</ head >
< body >
< div style ="height:2000px" ></ div >
< div id ="fixed" >
FIXED
</ div >
</ body >
</ html >

 

 

转载于:https://www.cnblogs.com/xylxq1925/articles/1901400.html