订阅让IE支持position:fixed
2008 12 24 11:12 AM 3531次查看
看到很多都是用JavaScript实现的，其实就用CSS也能解决。
如果不知道position:fixed的作用，你可以用Firefox之类的浏览器浏览下本论坛的页面，在载入时会有个loading框，而且即使使用滚动条，也仍然会垂直居中显示。
详细描述如下：
static 没有特别的设定，遵循基本的定位规定，不能通过z-index进行层次分级。
relative 不脱离文档流，参考自身静态位置通过 top,bottom,left,right 定位，并且可以通过z-index进行层次分级。
absolute 脱离文档流，通过 top,bottom,left,right 定位。选取其最近的父级定位元素，当父级 position 为 static 时，absolute元素将以body坐标原点进行定位，可以通过z-index进行层次分级。
fixed 固定定位，这里他所固定的对像是可视窗口而并非是body或是父级元素。可通过z-index进行层次分级。
如果只是要让IE6支持的话，可以通过下面的代码模拟：
<!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">
<!--
注意：必须要用声明为标准模式
其他代码省略
-->
<!--[if IE 6]>
<style type="text/css">
html{overflow:hidden;}
body{height:100%;overflow:auto;}
.fixed{position:absolute;/*还可以在这写top和left属性，不过建议针对id来写*/}
</style>
<![endif]--><!--[if IE 5]>
<style type="text/css">
.fixed{
postion: absolute;
bottom: auto;
top: expression( eval(document.compatMode && document.compatMode==’CSS1Compat’) ? documentElement.scrollTop + (documentElement.clientHeight - this.clientHeight) - 1 : document.body.scrollTop + (document.body.clientHeight - this.clientHeight) - 1);
}
</style>
<![endif]--><?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh">
<!--
注意：必须加上XML Prolog
其他代码省略
-->
<!--[if lt IE 7]>
<style type="text/css">
body{overflow:hidden;}
#wrapper{height:100%;overflow:auto;}
#fixed{position:absolute;right:17px;}
/*这里写成id了，所以给了个17，其实是滚动条的宽度*/
</style>
<![endif]-->
向下滚动可载入更多评论，或者点这里禁止自动加载。