您的位置：首页 > 其它

关于IE6不支持position:fixed的解决办法

2013-11-23 14:32 141 查看

转自： http://www.wxwdesign.cn/article/skills/ie6_position_fixed_debug.htm

在制作页面的过程中，有时候需要把某一块内容固定在网页某个位置处，滚动条拉动的过程，内容相对浏览器始终保持“位置不变”。示例如下：

<!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" />
<style type="text/css">
body{ margin:0px; padding:0px; font-size:12px; line-height:22px;}
p{ margin:0px; padding:36px;}
.fixed{ position:fixed; right:60px; top:100px; border:#666666 3px solid; background-color:#CCCCCC; padding:26px;}
</style>
<title>position_fixed测试</title>
</head>

<body>
<p>测试内容.........</p>
<p>测试内容.........</p>
<p>测试内容.........</p>
<p>测试内容.........</p>
<p>测试内容.........</p>
<p>测试内容.........</p>
<p>测试内容.........</p>
<p>测试内容.........</p>
<p>测试内容.........</p>
<p>测试内容.........</p>
<p>测试内容.........</p>
<p>测试内容.........</p>
<p>测试内容.........</p>
<p>测试内容.........</p>
<p>测试内容.........</p>
<div class="fixed">我的位置是固定的！拉动滚动条看效果。</div>
</body>
</html>

运行代码后发现，在Firefox、IE7.0、opera等浏览器中，效果都是正常的，唯独IE6中，本来要固定的内容却掉到了“测试内容.......”的下面去了。IE6不支持“position:fixed;”，解决这个bug的办法有两种，一种是CSS方法，另外一种是JS方法。

下面先介绍CSS解决办法：

html{overflow:hidden;}
body{height:100%;overflow:auto;}
固定的内容{position:absolute;} 示例中为：.fixed{position:absolute;}

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" /><style type="text/css">body{ margin:0px; padding:0px; font-size:12px; line-height:22px;}p{ margin:0px; padding:36px;}.float2{ position:absolute; padding:26px; border:#999999 3px solid; background-color:#3399FF; right:200px; top:200px;}.fixed{ position:absolute; right:0px; bottom:0px; border:#666666 3px solid; background-color:#CCCCCC; padding:26px; height:26px;}</style><script language="javascript" type="text/javascript">window.onload=function(){var obj=document.getElementById("fixed"); //position:fixed对象var n=document.documentElement.clientHeight-obj.offsetHeight; //top值window.onscroll=function(){obj.style.top=(document.body.scrollTop||document.documentElement.scrollTop)+n+'px';}window.onresize=function(){obj.style.top=(document.body.scrollTop||document.documentElement.scrollTop)+n+'px';}}</script><title>position_fixed测试</title></head><body><p>测试内容.........</p><p>测试内容.........</p><p>测试内容.........</p><p>测试内容.........</p><p>测试内容.........</p><p>测试内容.........</p><p>测试内容.........</p><p>测试内容.........</p><p>测试内容.........</p><p>测试内容.........</p><p>测试内容.........</p><p>测试内容.........</p><p>测试内容.........</p><p>测试内容.........</p><p>测试内容.........</p><div class="float2">浮动的内容2</div><div class="fixed" id="fixed">我的位置是固定的！拉动滚动条看效果。</div></body></html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

另外网上还有一种解决办法：CSS expression

.fixed {
position: absolute;
clear: both;
top:expression(eval(document.compatMode &&
document.compatMode=='CSS1Compat') ?
documentElement.scrollTop
+(documentElement.clientHeight-this.clientHeight) - 1
: document.body.scrollTop
+(document.body.clientHeight-this.clientHeight) - 1);
}

CSS expression的问题就是很耗内存，本来CSS就是控制表现，行为应该有JavaScript来管理，让CSS来管理行为，显然不合适，不推荐此方法。

可能有人会说，JavaScript不如CSS兼容性好，但对于IE6的bug，我更推荐JavaScript解决办法：

如果有一部分用户使用IE6，同时他的浏览器又不支持JavaScript，那他将看到的是position:absolute;这个效果并不影响用户使用，只是位置不会跟随滚动条，对网页整体用户体验影响不大。并且IE7、IE8、Firefox等用户都不受影响，只有IE6用户不支持JavaScript会受影响，这个结果也正是我们想要的。
IE6对于所有前端人员来说，不少人会受其bug困扰已久（包括PNG不透明的问题），加速IE6的灭绝，是很多前端人员的心声，为了迫使IE6用户升级到IE7，可以说已经有很多人在努力（如果你用IE6访问该网站，会提示你升级浏览器）。所以对于IE6的bug，如果对整体影响不大，允许的前提下，我会尽量保留bug给用户，如果大家都这样做，用户使用IE6上网的时候，到处都是不完美（甚至不可用）内容，那用户自然会升级浏览器，IE6的灭绝也会加速，指日可待。
当然为了更好的兼容性和工作需求，有时候不得不做出妥协，向用户妥协，向IE6妥协，向非标准妥协，谁让我们是在为别人打工！

针对上面的问题，网上有了更好的解决办法，纯CSS实现，无闪动，效果很好：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航