fixed问题与随滚动条滚动的效果（IE6篇）

最新推荐文章于 2023-06-07 17:14:59 发布

云南仟龙Mark

最新推荐文章于 2023-06-07 17:14:59 发布

阅读量739

点赞数

原文链接：https://blog.51cto.com/u_15111999/2705189

版权

本文详细介绍了如何在IE6中通过CSS和JavaScript解决position:fixed的兼容性问题，提供了一段CSS代码和解释，强调了在IE6中使用_position:absolute;和expression()表达式来模拟fixed定位的效果。同时，提醒开发者注意在其他浏览器中可能存在的不兼容情况，并给出了相应的调整建议。

摘要由CSDN通过智能技术生成

序言：

“从 jQuery”兼容IE6的滚动监听”中提到了解决IE6fixed问题，特别是引入一个 js文件，并且声明一个脚本会为这个 div声明一个 fixed位置来解决，这样做很糟糕啊。Javascript在被引入的 Javascript管理不好的情况下，还在 head声明中引入 javascript，然后给这个 div声明一个 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.qlyl1688.com/products/omlxyj.html "> 
<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 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>    
    </div> 
    <div style="float:left;width:20%;min-height:100px;"><div class="fixedbox"></div></div> 
    <div style="clear:both"></div>     
  </body> 
</html>

上述代码，对于IE6的样式，前面都加上了_，_的部分是IE6特定的重写样式声明，

而实际上，在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的div的位置，

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

1
2
3
4
5
6
.fixed{
/IE6实现position: fixed;/
_position: absolute;
_top: expression(eval(document.documentElement.scrollTop));
_margin-top:100px;
}

关于top中的代码变得如此短的原因是，不需要使用document.documentElement.cl ientHeig ht获取浏览器显示窗口的大小。

而且- this. offsetHeight (this.currentStyle.ma rgin Top,10)||0)-(this.currentStyle.ma rgin Bott om,10)-(parseInt (this.currentStyle.ma rgin Bott om,10)这一切都是为了调整得更精确，如果你不想做，也可以不做，只是在视觉上做得很小。

另外，上面的代码，每个人都能看到，关于 fixedbox，我没有设置它的 right, left，因为，我希望它在随滚动条滚动时，仍然能够保持父元素 div的 float: left属性。

也就是说，右边的蓝色块，左边的 sss堆，仍然是80%和20%的分割。

若有疑问请留言或到本站社区进行交流讨论，感谢阅读，希望对大家有所帮助，谢谢大家的支持！

源于脚本之家