这个内容是老生常谈了,主要问题就是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>
