解决 IE6 position:fixed 固定定位问题

时间：2014-06-07 05:20:40 阅读：226 评论：0 收藏：0 [点我收藏+]

实现<div id="ad"></div>固定在窗口左下角

一般的 position:fixed; 实现方法

#ad{
    position:fixed;
    bottom:0;
    left:0px;
}

在 IE6 中实现 position:fixed; 的办法

#ad{
    position:fixed;
    bottom:0;
    left:0px;
 　　_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)));
}

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

上面的只是一个例子，下面的才是最重要的代码片段：

使元素固定在浏览器的顶部

#ad{
    _position:absolute;
    _bottom:auto;
    _top:expression(eval(document.documentElement.scrollTop));
}

使元素固定在浏览器的底部

#ad{
    _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 固定定位问题的。

下面是一个完整的例子可供测试：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML 
xmlns="http://www.w3.org/1999/xhtml"><HEAD>
<TITLE>兼容ie6,ie7,ie8,firefox左下角浮动广告代码</TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<style>
*html{
    background-image:url(about:blank);
    background-attachment:fixed;
}
</style>
<div id="ad" style="position:fixed;border:1px solid #000;left:0;bottom:0px; _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)));" id="ad">
    <a href="">测试文字在此.</a>
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>

<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div>
    <p>hello, i‘m here!</p>
    <p>//这一行写了这个DIV是绝对定位，最好再加一下z-index；边框为1px的实线黑色边；距右边有0PX; ID=AD；</p>
</div>



</BODY>

</HTML>

View Code

本文转载自：http://loo2k.com/blog/ie6-position-fixed/

解决 IE6 position:fixed 固定定位问题,布布扣,bubuko.com

解决 IE6 position:fixed 固定定位问题

标签：c style class blog code a

原文地址：http://www.cnblogs.com/sparrow/p/3755959.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行