详解IE6中的position:fixed问题与随转动条转动的效

详解IE6中的position:fixed问题与随转动条转动的结果

媒介:

在《【jQuery】兼容IE6的转动监听》(点击打开链接)提及到办理IE6fixed问题,详细是要引入一个js文件,还要声明一条剧本就为这个div声明fixed定位去办理,起始这样很欠好啊。引入的Javascript欠好打点之余,还要在head声明引入javascript,之后又要给这个div声明一个id,之后又要在剧本出弄一条声明,实在是烦死了。

利用position:fixed无非是想做出如下的结果。

根基上position:fixed是在IE7以上的所有欣赏器都是没有问题的:

IE8:

详解IE6中的position:fixed问题与随动弹条动弹的效

野狐禅FireFox:

详解IE6中的position:fixed问题与随动弹条动弹的效

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

详解IE6中的position:fixed问题与随动弹条动弹的效

只能操作position: absolute;加一段在css样式中执行的javascript剧本去办理。

<!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> <div> <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> </div> <div><div></div></div> <div></div> </body> </html>

上述代码,对付IE6的样式,前面都加上了_,_的部门是IE6特定的重写样式声明,详细见《【CSS】关于CSS样式中的!important、*、_标记》(点击打开链接

而实际上,在IE6中,以下的CSS:

.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))); }

等价于其它欣赏器的:

.fixed{ position: fixed; }

虽然IE6中实现position:fixed的CSS大概在某些欣赏器中不正常,因此在各个样式前面补上一条下划线_,暗示仅在IE6中执行。

同时IE6应有的如上样式之后,不要像其它欣赏器用right,top,left,bottom去定位,而是用margin-bottom,margin-left,margin-right去配置被position:fixed的div的位置,

这里调理div的位置的时候还需要留意,由于上述的兼容IE6的CSS操作到top的属性,所以配置margin-top是不管用,假如你要配置这个div在浮动的时候,离欣赏器的顶部是几多的话,你应该这样写:

.fixed{ /*IE6实现position: 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)一切是为了微调越发准确,假如你不想要也可以不加,仅仅是有一点视觉结果罢了。

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wsdppp.html