IE6浏览器下实现类似position:fixed的层相对窗口固定不动或浮动效果

参考大家的博客,折腾了下jquery实现大的scroll返回顶部与底部效果,用到了position:fixed来固定层,但是都不兼容IE6浏览器。(又是万恶的IE6,可是偶还是想完美点….)
因为IE6是不支持position:fixed属性的,所以在IE下面要完成层相对窗口不动或浮动的效果一般很麻烦。其实可以利用overflow属性,我们可以借助position:absolute来实现类似的效果。

示例如下,在css里面添加这么两个属性:

html{
overflow: hidden;
}
body {
margin: 0px;
overflow: auto;
height: 100%;
}

这是什么意思呢?首先,html的overflow:hidden,使得超出窗口范围的内容隐藏,这样就不会在窗口右侧出现滚动条了。其次,body的 height:100%,使得body内的页面内容的高度永远都是窗口的大小,body的overflow:auto使得内容超出范围了就自动加上滚动 条。

想让它浮动的层,就再用position:absolute,然后指定位置就可以了,这样就做出了position:fixed的效果。

#nav_upanddown{position:fixed!important;position:absolute;top:40%;left:50%;margin-left:540px;display:block;}

也就是说,窗口右边的滚动条实际上是body的滚动条,而不是浏览器的滚动条,不信的话,把body的margin改一下就看到了。

=============================
发现该方法会带来更多的问题。。。
又参考了一种相对较好的解决方案如下文:
解决 IE6 position:fixed 固定定位问题
文自:http://loo2k.com/ie6-position-fixed/

这篇文章介绍的是介绍的是如何解决IE6不支持position:fixed;属性的办法。如果我们需要做某个元素始终位于浏览器的底部,不会因为浏览器窗口的缩放和滚动条的滚动而变化,那个肯定是想到的用position:fixed生成绝对定位,只要设置这个CSS属性就能达到刚刚的需求。当其他浏览器都正常显示的时候,只有IE6不那么完美。该元素的位置是通过”left”, “top”, “right” 以及 “bottom” 属性进行规定。

一般的 position:fixed; 实现方法

...


在 IE6 中实现 position:fixed; 的办法

...


right 跟 left 属性可以用绝对定位的办法解决,而 top 跟 bottom 就需要用上面的表达式来实现。其中在 _position:absolute; 中的 _ 符号只有 IE6 才能识别,目的是为了区分其它浏览器。

上面的只是一个例子,下面的才是最重要的代码片段:

使元素固定在浏览器的顶部:
#top{
_position:absolute;
_bottom:auto;
_top:e­xpression(eval(document.documentElement.scrollTop));
}

使元素固定在浏览器的底部:
#top{
_position:absolute;
_bottom:auto;
_top:e­xpression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));
}

这两段代码只能实现在最底部跟最顶部,你可以使用 _margin-top:10px; 或者 _margin-bottom:10px; 修改其中的数值控制元素的位置。

position:fixed; 闪动问题

现在,问题还没有完全解决。在用了上面的办法后,你会发现:被固定定位的元素在滚动滚动条的时候会闪动。解决闪动问题的办法是在 CSS 文件中加入:
*html{
background-image:url(about:blank);
background-attachment:fixed;
}

其中 * 是给 IE6 识别的。

到此,IE6 的 position:fixed; 问题已经被解决了。

点赞 (0)
  1. LouisHan说道:

    还在研究IE6 精神可嘉啊

  2. 益酷网说道:

    IE6没人用了,支持的不多了!
    [reply=任侠,2011-05-14 11:04 AM]确实,通过统计发现现在IE6的比例确实下降了很多了,但是还是在五分之一以上的
    兼容嘛,关注前段的童鞋都会特别在意的[/reply]

  3. 浩子文说道:

    你们现在把PJ3玩转了。
    [reply=任侠,2011-05-14 11:04 AM]都是一样在关注最新的好用的东西,算是与pj3无关的吧[/reply]

  4. Mars说道:

    支持一个

  5. 美女说道:

    谢谢楼主分享了这么的东西,虽然没有遇到这问题,先收藏着,以后或许会用着。

回复 益酷网 取消回复

您的电子邮箱地址不会被公开。 必填项已用*标注

Captcha Code