兼容性好,自动置顶的淘宝悬浮工具栏,DIV绝对置顶(兼容IE,FF)

对于IE7,我们可以利用DIV的"position: fixed;"属性。代码如下:

#ie7_ff{
       position: fixed;
       top: 0px;
       left: 0px;
       width: 120px;
}

这段代码对于Firefox浏览器同样适用。但是IE6不支持“position: fixed;”属性。所以针对IE6我们可以用如下代码:

#ie6_ie7{
       position: absolute;
       width: 120px;
       left: 140px;
       top: expression(eval(document.documentElement.scrollTop));
}

这段代码对于IE7同样适用。但是FF不支持。

利用浏览器HACK技巧,我们就可以写出兼容IE6,IE7,FF的CSS代码:

#all_f1{
       width: 150px;
       position: fixed;       //IE7,FF
       _position: absolute;        //IE6
       left: 280px;
       top: 0px;
       _top: expression(eval(document.documentElement.scrollTop));    //IE6
#all_f2{
       width: 150px;
       position: fixed;       //FF
       *position: absolute;        //IE6,IE7
       left: 450px;
       top: 0px;
       *top: expression(eval(document.documentElement.scrollTop));   // IE6,IE7
 

----------------------------------------------------------------------------------------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
">
<html xmlns="http://www.w3.org/1999/xhtml
">
<head>
<title>兼容IE6的淘宝悬浮工具栏</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
#float{width:744px;height:34px;border:1px solid #C0DBF8;position:absolute;top:0}
#box{position:relative;height:600px;}
</style>
</head>
<body>
<div style="height:300px;background:#eee"></div>
<div id="box"><div id="float" >ddd</div></div>
<div style="height:1000px;background:#eee"></div>
</body>
<script type="text/javascript">
var IO=document.getElementById('float'),Y=IO,H=0,IE6;
IE6=window.ActiveXObject&&!window.XMLHttpRequest;
while(Y){H+=Y.offsetTop;Y=Y.offsetParent};
if(IE6)
    IO.style.cssText="position:absolute;top:expression(this.fix?(document"+
        ".documentElement.scrollTop-(this.javascript||"+H+")):0)";
window.onscroll=function (){
    var d=document,s=Math.max(d.documentElement.scrollTop,document.body.scrollTop);
    if(s>H&&IO.fix||s<=H&&!IO.fix)return;
    if(!IE6)IO.style.position=IO.fix?"":"fixed";       
    IO.fix=!IO.fix;
};
try{document.execCommand("BackgroundImageCache",false,true)}catch(e){};
//]]>
</script>
</html> 

此条目发表在article分类目录。将固定链接加入收藏夹。