详解解读IE6中的position：fixed题目-百分百源码网

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

发布时间：09/01 来源：未知浏览：关键词：

这篇文章主要介绍了详解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足本去解决。

<!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：

.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框架的不同和利用场景（有用技巧）

以上就是详解解读IE6中的position：fixed问题的具体内容，更多请关注百分百源码网其它相关文章！

打赏