我要评论详解ie6中的position：fixed问题与随滚动条滚动的效果
前言：
在《【jquery】兼容ie6的滚动监听》（）提及到解决ie6fixed问题，具体是要引入一个js文件，还要声明一条脚本就为这个div声明fixed定位去解决，起始这样很不好啊。引入的javascript不好管理之余，还要在head声明引入javascript，之后又要给这个div声明一个id，之后又要在脚本出弄一条声明，实在是烦死了。
使用position：fixed无非是想做出如下的效果。
基本上position：fixed是在ie7以上的所有浏览器都是没有问题的：
ie8：
野狐禅firefox：
然而由于ie6中直接就没有position：fixed属性，要做出如下的效果：
只能利用position: absolute;加一段在css样式中执行的javascript脚本去解决。
<!doctype html public "-//w3c//dtd html 4.01//en" "http://www.w3.org/tr/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>untitled document</title>
<style type="text/css">
.fixedbox {
background: #69c;
height: 60px;
width: 100px;
position: fixed;
bottom: 100px;
/*ie6实现position: fixed;*/
/*等价于position: fixed;虽然代码好长，但是根本就不用管*/
_position: absolute;
_top: expression(eval(
document.documentelement.scrolltop + document.documentelement.clientheight-this.offsetheight-
(parseint(this.currentstyle.margintop,10)||0)-
(parseint(this.currentstyle.marginbottom,10)||0)));
/*等价于position: fixed;虽然代码好长，但是根本就不用管*/
_margin-bottom:100px;/*设置位置，不要用bottom，而是改用margin-bottom，margin-xx来实现*/
}
</style>
</head>
<body>
<div style="float:left;width:80%;min-height:100px;">
<p>sss</p><p>sss</p><p>sss</p><p>sss</p><p>sss</p><p>sss</p><p>sss</p><p>sss</p><p>sss</p>
<p>sss</p><p>sss</p><p>sss</p><p>sss</p><p>sss</p><p>sss</p><p>sss</p><p>sss</p><p>sss</p>
<p>sss</p><p>sss</p><p>sss</p><p>sss</p><p>sss</p><p>sss</p><p>sss</p><p>sss</p><p>sss</p>
<p>sss</p><p>sss</p><p>sss</p><p>sss</p><p>sss</p><p>sss</p><p>sss</p><p>sss</p><p>sss</p>
</div>
<div style="float:left;width:20%;min-height:100px;"><div class="fixedbox"></div></div>
<div style="clear:both"></div>
</body>
</html>
上述代码，对于ie6的样式，前面都加上了_，_的部分是ie6特定的重写样式声明，具体见《【css】关于css样式中的!important、*、_符号》（）
而实际上，在ie6中，以下的css：
.fixed{
position: absolute;
top: expression(eval(
document.documentelement.scrolltop + document.documentelement.clientheight-this.offsetheight-
(parseint(this.currentstyle.margintop,10)||0)-
(parseint(this.currentstyle.marginbottom,10)||0)));
}
等价于其它浏览器的：
.fixed{
position: fixed;
}
当然ie6中实现position：fixed的css可能在某些浏览器中不正常，因此在各个样式前面补上一条下划线_，表示仅在ie6中执行。
同时ie6应有的如上样式之后，不要像其它浏览器用right,top,left,bottom去定位，而是用margin-bottom,margin-left,margin-right去设置被position：fixed的div的位置，
这里调节div的位置的时候还需要注意，由于上述的兼容ie6的css利用到top的属性，所以设置margin-top是不管用，如果你要设置这个div在浮动的时候，离浏览器的顶部是多少的话，你应该这样写：
.fixed{
/*ie6实现position: fixed;*/
_position: absolute;
_top: expression(eval(document.documentelement.scrolltop));
_margin-top:100px;
}
这里关于_top的代码之所以短了这么多，是因为无须用document.documentelement.clientheight来获取浏览器显示窗口大小。
而-this.offsetheight-(parseint(this.currentstyle.margintop,10)||0)-(parseint(this.currentstyle.marginbottom,10)||0)一切是为了微调更加精确，如果你不想要也可以不加，仅仅是有一点视觉效果而已。
再者，上述的代码，大家可以看到，关于fixedbox这个东西，我并没有设置其right,left，是因为，我想让其在随滚动条滚动的时候，依旧能够保持父级div的float:left属性。
就是，右边的蓝色色块，与左边一大堆sss，依旧是80%与20%的分割。
如有疑问请留言或者到本站社区交流讨论，感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！
发表评论