本文摘自PHP中文网,作者亚连,侵删。
这篇文章主要介绍了详解IE6中的position:fixed问题与随滚动条滚动的效果的相关资料,希望通本文能帮助到大家,需要的朋友可以参考下详解IE6中的position:fixed问题与随滚动条滚动的效果
前言:
在《【jQuery】兼容IE6的滚动监听》(点击打开链接)提及到解决IE6fixed问题,具体是要引入一个js文件,还要声明一条脚本就为这个p声明fixed定位去解决,起始这样很不好啊。引入的Javascript不好管理之余,还要在head声明引入javascript,之后又要给这个p声明一个id,之后又要在脚本出弄一条声明,实在是烦死了。
使用position:fixed无非是想做出如下的效果。
基本上position:fixed是在IE7以上的所有浏览器都是没有问题的:
IE8:

野狐禅FireFox:

然而由于IE6中直接就没有position:fixed属性,要做出如下的效果:

只能利用position: absolute;加一段在css样式中执行的javascript脚本去解决。
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 32 33 34 35 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
< html >
< head >
< meta http-equiv = "Content-Type" content = "text/html; charset=utf-8" >
< title >Untitled Document</ title >
< style type = "text/css" >
.fixedbox {
background: #69C;
height: 60px;
width: 100px;
position: fixed;
bottom: 100px;
/*IE6实现position: fixed;*/
/*等价于position: fixed;虽然代码好长,但是根本就不用管*/
_position: absolute;
_top: expression(eval(
document.documentElement.scrollTop + document.documentElement.clientHeight-this.offsetHeight-
(parseInt(this.currentStyle.marginTop,10)||0)-
(parseInt(this.currentStyle.marginBottom,10)||0)));
/*等价于position: fixed;虽然代码好长,但是根本就不用管*/
_margin-bottom:100px;/*设置位置,不要用bottom,而是改用margin-bottom,margin-xx来实现*/
}
</ style >
</ head >
< body >
< p style = "float:left;width:80%;min-height:100px;" >
< p >sss</ p >< p >sss</ p >< p >sss</ p >< p >sss</ p >< p >sss</ p >< p >sss</ p >< p >sss</ p >< p >sss</ p >< p >sss</ p >
< p >sss</ p >< p >sss</ p >< p >sss</ p >< p >sss</ p >< p >sss</ p >< p >sss</ p >< p >sss</ p >< p >sss</ p >< p >sss</ p >
< p >sss</ p >< p >sss</ p >< p >sss</ p >< p >sss</ p >< p >sss</ p >< p >sss</ p >< p >sss</ p >< p >sss</ p >< p >sss</ p >
< p >sss</ p >< p >sss</ p >< p >sss</ p >< p >sss</ p >< p >sss</ p >< p >sss</ p >< p >sss</ p >< p >sss</ p >< p >sss</ p >
</ p >
< p style = "float:left;width:20%;min-height:100px;" >< p class = "fixedbox" ></ p ></ p >
< p style = "clear:both" ></ p >
</ body >
</ html >
|
上述代码,对于IE6的样式,前面都加上了_,_的部分是IE6特定的重写样式声明,具体见《【CSS】关于CSS样式中的!important、*、_符号》(点击打开链接)
而实际上,在IE6中,以下的CSS:
1 2 3 4 5 6 7 | . fixed {
position : absolute ;
top : expression(eval(
document.documentElement.scrollTop + document.documentElement.clientHeight-this.offsetHeight-
(parseInt(this.currentStyle.marginTop, 10 )|| 0 )-
(parseInt(this.currentStyle.marginBottom, 10 )|| 0 )));
}
|
等价于其它浏览器的:
1 2 3 | . fixed {
position : fixed ;
}
|
当然IE6中实现position:fixed的CSS可能在某些浏览器中不正常,因此在各个样式前面补上一条下划线_,表示仅在IE6中执行。
同时IE6应有的如上样式之后,不要像其它浏览器用right,top,left,bottom去定位,而是用margin-bottom,margin-left,margin-right去设置被position:fixed的p的位置,
这里调节p的位置的时候还需要注意,由于上述的兼容IE6的CSS利用到top的属性,所以设置margin-top是不管用,如果你要设置这个p在浮动的时候,离浏览器的顶部是多少的话,你应该这样写:
1 2 3 4 5 6 | . fixed {
_position : absolute ;
_top : expression(eval(document.documentElement.scrollTop));
_margin-top : 100px ;
}
|
这里关于_top的代码之所以短了这么多,是因为无须用document.documentElement.clientHeight来获取浏览器显示窗口大小。
而-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)一切是为了微调更加精确,如果你不想要也可以不加,仅仅是有一点视觉效果而已。
再者,上述的代码,大家可以看到,关于fixedbox这个东西,我并没有设置其right,left,是因为,我想让其在随滚动条滚动的时候,依旧能够保持父级p的float:left属性。
就是,右边的蓝色色块,与左边一大堆sss,依旧是80%与20%的分割。
上面是我整理给大家的,希望今后会对大家有帮助。
相关文章:
JavaScript在IE9之前版本中内存泄露问题(详细总结)
JavaScript hasOwnProperty() 函数(图文教程,附有代码示例)
JQuery,Extjs,YUI,Prototype,Dojo 等JS框架的区别和应用场景(实用技巧)
以上就是详解解读IE6中的position:fixed问题的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
ie不支持css3动画吗
line-height文字垂直居中在ie9不被支持的解决方法
分享移动端网页宽度值实例代码
html怎样把div放在底部
详解css中position属性的用法
html5中关于封装和添加与获取删除以及cookie介绍
ie网页弹出窗口的参数都有哪些
cookie的具体使用方法
position的几个属性的作用分别是什么
html5 viewport总结讲述
更多相关阅读请进入《position》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » 详解解读IE6中的position:fixed问题