【IE6 BUG大全】position:fixed在IE6下的实现

<< 【转】写给新手：如何上手3dsMax？ | 首页 | 用css控制div内链接在新窗口打开 >>

日期：2009-06-30 | 分类：互联网

版权声明：转载时请以超链接形式标明文章原始出处和作者信息及本声明
 http://ericneo.blogbus.com/logs/41696327.html

Position属性有四个可选值，它们分别是：static、absolute、fixed、relative。我们下面来共同学习它们的不同的用法，在学习中我们应该去思考在什么布局情况下，应该使用它们其中的哪一种。

值	描述
static	默认。位置设置为 static 的元素，它始终会处于页面流给予的位置（static 元素会忽略任何 top、bottom、left 或 right 声明）。
relative	位置被设置为 relative 的元素，可将其移至相对于其正常位置的地方，因此 "left:20" 会将元素移至元素正常位置左边 20 个像素的位置。
absolute	位置设置为 absolute 的元素，可定位于相对于包含它的元素的指定坐标。此元素的位置可通过 "left"、"top"、"right" 以及"bottom" 属性来规定。
fixed	位置被设置为 fixed 的元素，可定位于相对于浏览器窗口的指定坐标。此元素的位置可通过 "left"、"top"、"right" 以及"bottom" 属性来规定。不论窗口滚动与否，元素都会留在那个位置。工作于 IE7（strict 模式）。

position:static　无定位
该属性值是所有元素定位的默认情况，在一般情况下，我们不需要特别的去声明它，但有时候遇到继承的情况，我们不愿意见到元素所继承的属性影响本身，从而可以用position:static取消继承，即还原元素定位的默认值。
如：#nav { position:static; }

其他两种前面提过，我们主要说的是fixed

position:fixed　相对于窗口的固定定位
这个定位属性值是什么意思呢？元素的定位方式同absolute类似，但它的包含块是视区本身。在屏幕媒体如WEB浏览器中，元素在文档滚动时不会在浏览器视察中移动。例如，它允许框架样式布局。在页式媒体如打印输出中，一个固定元素会出现于第一页的相同位置。这一点可用于生成流动标题或脚注。我们也见过相似的效果，但大都数效果不是通过CSS来实现了，而是应用了JS脚本。

请特别注意，IE6及以下不支持CSS中的position:fixed属性。真的非常遗憾，所以我们只能通过JS模拟和CSS Hack等方法来实现。

1.IE条件注释解决方案：

demo： http://www.css88.com/demo/position_fixed/POSITION_fixed2.html

XML/HTML代码

<!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>无标题文档</title>
<style type="text/css">
<!--
body {margin: 0; padding:0}
p{ height:50px}
.fixed {padding: 10px; background: #000; left: 0px; color: #fff; position: fixed; top:0; }
-->
</style>
<!--[if IE 6]>
<style type="text/css">*/
html{overflow:hidden;}
body{height:100%;overflow:auto;}
.fixed{position:absolute;}
</style>
<![endif]-->
<!--[if lt IE 6]>
<style type="text/css">
.fixed{position:absolute;top:expression(eval(document.body.scrollTop + 50));}
</style>
<![endif]-->
</head>
<body>
Begin
这是为了增加高度
这是为了增加高度
这是为了增加高度
这是为了增加高度
这是为了增加高度
这是为了增加高度
这是为了增加高度
这是为了增加高度
这是为了增加高度
这是为了增加高度
这是为了增加高度
这是为了增加高度
这是为了增加高度
这是为了增加高度
这是为了增加高度
这是为了增加高度
End</DIV>
<div class=fixed>position: fixed;我始终在屏幕左上角哦</div>
</body>
</html>

2.CSS hack解决方案：

XML/HTML代码

<!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>无标题文档</title>
<style type="text/css">
<!--
body {margin: 0; padding:0}
p{ height:50px}
html {_overflow: hidden}
body {_overflow: auto; _height: 100%}
.fixed {padding: 10px; background: #000; left: 0px; color: #fff; position: fixed; top:0; _position: absolute}
-->
</style></head>
<body>
Begin
这是为了增加高度
这是为了增加高度
这是为了增加高度
这是为了增加高度
这是为了增加高度
这是为了增加高度
这是为了增加高度
这是为了增加高度
这是为了增加高度
这是为了增加高度
这是为了增加高度
这是为了增加高度
这是为了增加高度
这是为了增加高度
这是为了增加高度
这是为了增加高度
End</DIV>
<DIV class=fixed>position: fixed;我始终在屏幕左上角哦</DIV>
</body>
</html>