关于IE6不支持position:fixed的解决办法(固定图片)(转载)

关于 position:fixed; 属性:

生成绝对定位的元素，相对于浏览器窗口进行定位。
元素的位置经过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。

position:fixed; 可让网页上的某个元素固定在一个绝对的位置，即便拉动滚动条位置也不发生变化。（在 LOO2K 博客右下角的那个置顶的小按钮就是用了这个 CSS 属性实现的）
通常的 position:fixed; 实现方法

以个人博客为例，在右下角<div id="top">...</div>这个 HTML 元素使用的 CSS 代码以下：
#top{
position:fixed;
bottom:0;
right:20px;
}

实现让<div id="top">...</div>元素固定在浏览器的底部和距离右边的20个像素。
在 IE6 中实现 position:fixed; 的办法

刚刚提过，在 IE6 中是不能直接使用 position:fixed; 。你须要一些 CSS Hack 来解决它。（固然，IE6 的问题也不单单 position:fixed;）

相同的仍是让 <div id="top">...</div> 元素固定在浏览器的底部和距离右边的20个像素，此次的代码是：
#top{
position:fixed;
_position:absolute;
bottom:0;
right:20px;
_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)));
}

right 跟 left 属性能够用绝对定位的办法解决，而 top 跟 bottom 就须要用上面的表达式来实现。其中在_position:absolute;中的_符号只有 IE6 才能识别，目的是为了区分其余浏览器。

上面的只是一个例子，下面的才是最重要的代码片断：
使元素固定在浏览器的顶部
#top{
_position:absolute;
_bottom:auto;
_top:expression(eval(document.documentElement.scrollTop));
}
使元素固定在浏览器的底部
#top{
_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)));
}

这两段代码只能实如今最底部跟最顶部，你可使用 _margin-top:10px; 或者 _margin-bottom:10px; 修改其中的数值控制元素的位置。
position:fixed; 闪动问题

如今，问题尚未彻底解决。在用了上面的办法后，你会发现：被固定定位的元素在滚动滚动条的时候会闪动。解决闪动问题的办法是在 CSS 文件中加入：
*html{
background-image:url(about:blank);
background-attachment:fixed;
}

其中 * 是给 IE6 识别的。

到此，IE6 的 position:fixed; 问题已经被解决了。如今 LOO2K 这个博客上的固定定位就是使用的这个办法解决 IE6 固定定位问题的。

PS:在vs里面,带*是不能被格式化的,建议少用*(2013.07.15)

 

原文地址:http://loo2k.com/blog/ie6-position-fixed/.

 

刚刚在网站添加一个微信二维码的例子(2013.10.14):

.adClass
{
    background: none repeat scroll 0 0 white;
    border: 1px solid lightGrey;
    border-radius: 5px 5px 5px 5px;
    box-shadow: 0 0 3px #DDDDDD;
    left: 50.5%;
    top:12%;
    margin-left: 510px;
    overflow: hidden;
    position: fixed;
    visibility: visible;
    z-index: 100;
    _position:absolute;
    _bottom:auto;
    /*固定左边*/_top:expression(eval(240+ document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||660)));
    /*固定顶部*/_top:expression(eval(document.documentElement.scrollTop+100))
}

 

五行代码终极完美解决从IE6到Chrome全部浏览器的position:fixed;以及闪动问题:(2013.1.12)

这个方法其实已经使用好久了，以前主要在嵌入式WebQQ等产品中用过，如今拿出来分享一下吧，是目前最简洁的方式来实现ie6的position:fixed; 失效bug，以及的其余方法的闪动问题，CSS代码以下，很简单，自行修改调试便可：
html{
_background:url(about:blank); /* 阻止闪动 in IE6 , 把空文件换成about:blank , 减小请求 */
}

/* 你的图层 */
.positionFixedLayer{
position:fixed;
_position: absolute;
_top:expression(documentElement.scrollTop+documentElement.clientHeight-this.offsetHeight);
_left:expression(documentElement.scrollLeft+documentElement.clientWidth-this.offsetWidth-200);
}