Flex Home » position http://flex.desizen.com 又一个 flex 博客 Thu, 01 Dec 2011 03:33:47 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 完美的IE6 position:fixed http://flex.desizen.com/ie6-position-fixed/ http://flex.desizen.com/ie6-position-fixed/#comments Mon, 20 Jul 2009 06:52:39 +0000 joel http://flex.joelove.cn/?p=230 这个内容是老生常谈了,主要问题就是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>

from: 随网之舞

]]> http://flex.desizen.com/ie6-position-fixed/feed/ 15