本文向大家简单介绍一下解决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”
”1/DTD/xhtml1-transitional.dtd”>
<htmlxmlnshtmlxmlns=””>
<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>
