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

12,596次阅读
5 条评论

共计 2224 个字符,预计需要花费 6 分钟才能阅读完成。

参考大家的博客,折腾了下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
任侠
版权声明:本站原创文章,由 任侠 于2011-05-11发表,共计2224字。
转载说明:除特殊说明外本站文章皆由CC-4.0协议发布,转载请注明出处。
评论(5 条评论)
验证码
LouisHan 评论达人 LV.3
2011-05-26 05:21:00 回复

还在研究IE6 精神可嘉啊

     中国山东省济南市电信
益酷网 评论达人 LV.2
2011-05-12 19:33:32 回复

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

     中国山西省忻州市联通
浩子文 评论达人 LV.1
2011-05-12 17:28:02 回复

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

     中国四川省南充市联通
Mars 评论达人 LV.1
2011-05-11 21:04:23 回复

支持一个

     中国广东省深圳市电信
美女 评论达人 LV.2
2011-05-11 18:57:13 回复

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

     中国广东省梅州市电信