Pivot Code » hack http://www.pivotcode.com 欢迎来我的小思想绽放的地方…… Thu, 26 Aug 2010 02:19:09 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 IE6固定定位position属性fixed BUG http://www.pivotcode.com/ie6-position-fixed-bug/ http://www.pivotcode.com/ie6-position-fixed-bug/#comments Wed, 03 Mar 2010 04:53:25 +0000 刘 铭森 http://www.pivotcode.com/?p=430 当需要把一个元素永远固定在浏览器的一个位置的时候，那么就需要用到position的fixed属性。然后用top和left设置元素的位置。

这个效果也应用在人人网的个人首页底部的工具栏。

常去人人网的朋友肯定会发现，如果用IE6浏览器访问人人网的话，这个工具条以前是不存在的。后来，人人已经通过js实现此功能，但是它的效果和正常浏览器下访问是不同的，即每当拖动滚动条它就会隐藏，当停止时再出现。所以，值得肯定的是IE6不支持这个position的fixed属性。

这个问题也一直都在困扰着我，因为我一直都在想把这个效果实现在我的一个项目上，而又避开使用javascript。

后来在‘幸福收藏夹’博客，找到了解决方案——利用position:absolute定位在IE6下实现固定定位的效果，以下是实现原理：

fixed元素的绝对位置相对于HTML元素，滚动条则是基于body元素而不属于html元素。
当我们拖动滚动条滚动的时候，内容都会随窗口滚动，这时滚动的是body元素。HTML元素被浏览器判定为相对定位的根级元素，而我们定义的position:absolute元素也在HTLML元素当中，属于HTML元素的子元素。因此我们所定义的absolute元素会根据HTML元素的大小而进行绝对定位。如果我们未曾对HTML元素设置样式的情况下，它的大小是随内容的大小而变的,这样一来如果我们在其中使用绝对定位，并不能实现我们想得到的固定定位的效果。因此我们需要给我们需要绝对定位元素的相对定位盒模型指定一个绝对大小，即窗口当前的大小。但是body元素仍需保持其原有大小，否则就没有滚动条了。这时我们需要将超出HTML元素的内容隐藏掉，就可以让HTML元素永远保持在一个固定大小了。

代码如下：

html{overflow:hidden;} // Important（必须）。
body{overflow:auto;height:100%}

代码规定了html将只有当前窗口的大小，溢出的内容隐藏。但是body仍会随高度自动变化。于是我们就可以利用position:absolute来把元素固定在窗口任意位置了。例如仿人人网定位元素在底边：

示例的完整代码：

<!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-bug</title>
<style>
* {
	padding:0;
	margin:0;
}
html{_overflow:hidden;}/*IE6hack,必须*/
body{height:100%;overflow:auto;}
#footer .bottom {
	width:580px;
	height:20px;
	background-color:#ddd;
	border:1px solid #aaa;
	position:fixed;
	_position:absolute;/*IE6hack,必须*/
	bottom:0;
	left:50%;
	margin-left:-290px;
}
</style>
</head>
<body>
<div>
<h1>测试定位</h1>
占位文字
</div>
<div id="footer">
  <div class="bottom"></div>
</div>
</body>
</html>

注：本文参考自幸福收藏夹

相关日志

]]> http://www.pivotcode.com/ie6-position-fixed-bug/feed/ 3