IE6不支持position的问题

Posted 2020-10-12

原作者网址：http://www.sjyhome.com/css/let-ie6-support-position-fixed.html

解决IE6不支持position:fixed;的问题

SJY ? 发表于：2013年08月05日 00:00 ? 阅读：993

在网页设计中，时常要用到把某个元素始终定位在屏幕上，即使滚动浏览器窗口也不会发生变化。

一般我们会使用position:fixed来进行绝对固定，但IE6并不支持position:fixed属性，所以必须对IE6进行”特殊照顾”。

实验

我们想要把元素定位在浏览器的底部

HTML代码

<div class="box">
</div>
<div class="content"></div>

CSS代码

.box{
background:#69C;
height:60px;
width:500px;
position:fixed;
left:0;
bottom:0;
}
.content{
height:5000px;/*使内容足够长，方便查看滚屏效果*/
background:#9CF;
}

此刻在火狐中已经正常了，接下来为IE6增加一些针对性的代码，在box中加入

_position:absolute;
_bottom:auto;
_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));

现在IE6中已经实现固定定位的效果了，但是移动滚动条时，会出现闪屏，所以还需要在box中加入

*html{
background-image:url(about:blank);
background-attachment:fixed;
}

分析

定位的位置left和right可以用绝对定位的方法解决，所以上面加了专门针对IE6的绝对定位

_position:absolute;而 top 跟 bottom 就需要用上面的表达式来实现。

如果想要把box元素定位在浏览器的顶部，只需要修改_top的值，代码如下

_top:expression(eval(document.documentElement.scrollTop));

如果希望box元素不是位于最顶部，也不是位于最底部，你可以使用 _margin-top:30px;或_margin-bottom:30px;修改其中的数值来控制元素的位置。

IE6不支持position:fixed;的问题已经彻底解决了，想要更深入的理解，就多动动手吧！