返回首页 我的新博客

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

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

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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!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代码


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



再次测试，发现IE6也能fixed了，似乎bug解决了，但新的bug又出现了。，如果你的网页同时有两个浮动内容，你就会发现新的bug了。示例如下：

HTML代码


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



在代码里添加了.float2{position:absolute;}，结果IE6有问题了，float2的位置也变成fixed了，原来的absolute不能实现了。看来CSS的解决办法并不完美。

解决方法二：JavaScript

var n=100;  //top值
var obj=document.getElementById("fixed"); //position:fixed对象
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';}

示例如下：

HTML代码


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



运行效果后发现，一切正常，唯一一点不足之处就是滚动条拉动的过程中，固定块内容会有点闪。不过相对于CSS会造成新的bug，JavaScript解决方法似乎更圆满一些了。

再附上一个固定内容在右下角的例子：

HTML代码


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



另外网上还有一种解决办法：CSS e­xpression

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

CSS e­xpression的问题就是很耗内存，本来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实现，无闪动，效果很好：

HTML代码


[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
posted @   buffer的blogs  阅读(313)  评论(0)    收藏  举报
点击右上角即可分享
微信分享提示