详解解读IE6中的position：fixed问题

亚连

发布时间：2018-05-21 15:21:20

2298人浏览过

来源于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脚本去解决。

Untitled Document

sss

广研企业网站管理系统中英文双语版

v1.8新增功能简介：一、后台新增生成网站地图和生成Sitemap.xml的功能。二、新增下载中心功能，可在后台上传doc,xls,ppt,rar,pdf文件。三、新增产品缩略图自动缩放功能，图片按比例缩放，解决了图片变形问题。四、新闻、产品详细页新增了上一个、下一个的功能，改善用户体验。五、在线客服新增了阿里巴巴贸易通在线客服。六、可在后台设置分享代码，如百度分享和AddThis等。

下载

sss

上述代码，对于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的p的位置，

这里调节p的位置的时候还需要注意，由于上述的兼容IE6的CSS利用到top的属性，所以设置margin-top是不管用，如果你要设置这个p在浮动的时候，离浏览器的顶部是多少的话，你应该这样写：

.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)一切是为了微调更加精确，如果你不想要也可以不加，仅仅是有一点视觉效果而已。

再者，上述的代码，大家可以看到，关于fixedbox这个东西，我并没有设置其right,left，是因为，我想让其在随滚动条滚动的时候，依旧能够保持父级p的float:left属性。

就是，右边的蓝色色块，与左边一大堆sss，依旧是80%与20%的分割。

上面是我整理给大家的，希望今后会对大家有帮助。

JavaScript在IE9之前版本中内存泄露问题(详细总结)

JavaScript hasOwnProperty() 函数（图文教程，附有代码示例）

JQuery,Extjs,YUI,Prototype,Dojo 等JS框架的区别和应用场景（实用技巧）

HTML怎样设背景图片上下滚动_HTML背景图片上下滚动法【垂直】

HTML怎样让背景图片跟随鼠标_HTML背景图片跟鼠标的法【互动】

HTML背景图片被裁剪咋恢复_HTML背景图片防裁剪法【完整】

HTML怎样设背景图片线性渐变_HTML线性渐变背景图片法【过渡】

HTML怎样调背景图片位置_HTML调背景图片位置方法【微调】

本站声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn