【IE6 BUG大全】position:fixed在IE6下的实现

?

Position属性有四个可选值,它们分别是:staticabsolutefixedrelative。我们下面来共同学习它们的不同的用法,在学习中我们应该去思考在什么布局情况下,应该使用它们其中的哪一种。

?

描述
static 默认。位置设置为 static 的元素,它始终会处于页面流给予的位置(static 元素会忽略任何 top、bottom、left 或 right 声明)。
relative 位置被设置为 relative 的元素,可将其移至相对于其正常位置的地方,因此 “left:20″ 会将元素移至元素正常位置左边 20 个像素的位置。
absolute 位置设置为 absolute 的元素,可定位于相对于包含它的元素的指定坐标。此元素的位置可通过 “left”、”top”、”right” 以及”bottom” 属性来规定。
fixed 位置被设置为 fixed 的元素,可定位于相对于浏览器窗口的指定坐标。此元素的位置可通过 “left”、”top”、”right” 以及”bottom” 属性来规定。不论窗口滚动与否,元素都会留在那个位置。工作于 IE7(strict 模式)。

?


position:static 无定位
该属性值是所有元素定位的默认情况,在一般情况下,我们不需要特别的去声明它,但有时候遇到继承的情况,我们不愿意见到元素所继承的属性影响本身,从而可以用position:static取消继承,即还原元素定位的默认值。
如:#nav{position:static;}

这个定位属性值是什么意思呢?元素的定位方式同absolute类似,但它的包含块是视区本身。在屏幕媒体如WEB浏览器中,元素在文档滚动时不会在浏览器视察中移动。例如,它允许框架样式布局。在页式媒体如打印输出中,一个固定元素会出现于第一页的相同位置。这一点可用于生成流动标题或脚注。我们也见过相似的效果,但大都数效果不是通过CSS来实现了,而是应用了JS脚本。

其他两种前面提过,我们 主要说的是fixed

position:fixed 相对于窗口的固定定位


请特别注意,IE6及以下不支持CSS中的position:fixed属性。真的非常遗憾,所以我们只能通过JS模拟和CSS Hack等方法来实现。

1.IE条件注释解决方案:

demo: https://www.html.cn/demo/position_fixed/POSITION_fixed2.html

XML/HTML代码
<!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>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>position:fixed——IE条件注释解决方案</title>
<style type=”text/css”>
<!–
body {margin: 0; padding:0}
p{ height:50px}
.fixed {padding: 10px; background: #000; left: 0px;? color: #fff;? position: fixed; top:0; }
–>
</style>
<!–[if IE 6]>?
<style type=”text/css”>*/
html{overflow:hidden;}
body{height:100%;overflow:auto;}
.fixed{position:absolute;}
</style>
<![endif]–>
<!–[if lt IE 6]>
<style type=”text/css”>
.fixed{position:absolute;top:expression(eval(document.body.scrollTop + 50));}
</style>
<![endif]–>
</head>
<body>
<p>Begin</p>
<p>这是为了增加高度</p>
<p>这是为了增加高度</p>
<p>这是为了增加高度</p>
<p>这是为了增加高度</p>
<p>这是为了增加高度</p>
<p>这是为了增加高度</p>
<p>这是为了增加高度</p>
<p>这是为了增加高度</p>
<p>这是为了增加高度</p>
<p>这是为了增加高度</p>
<p>这是为了增加高度</p>
<p>这是为了增加高度</p>
<p>这是为了增加高度</p>
<p>这是为了增加高度</p>
<p>这是为了增加高度</p>
<p>这是为了增加高度</p>
<p>End</p>
<div class=fixed>position: fixed;我始终在屏幕左上角哦</div>
<!–以下是统计代码–>
<script type=”text/javascript”>initAccessKey()? //转换AccessKey For IE</script><script type=”text/javascript”>
var gaJsHost = ((“https:” == document.location.protocol) ? “https://ssl.” : “http://www.”);
document.write(unescape(“%3Cscript src='” + gaJsHost + “google-analytics.com/ga.js’ type=’text/javascript’%3E%3C/script%3E”));
</script>
<script type=”text/javascript”>
var pageTracker = _gat._getTracker(“UA-3448069-1”);
pageTracker._initData();
pageTracker._trackPageview();
</script>
</body>
</html>

?

2.CSS hack解决方案:

demo: https://www.html.cn/demo/position_fixed/POSITION_fixed1.html

XML/HTML代码
<!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>??
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />??
<title>无标题文档</title>??
<style type=”text/css”>??
body {margin: 0; padding:0}???
p{ height:50px}???
html {_overflow: hidden}???
body {_overflow: auto; _height: 100%}???
.fixed {padding: 10px; background: #000; left: 0px;? color: #fff;? position: fixed; top:0; _position: absolute}???
</style></head>??
??
<body>??
<p>Begin</p>??
<p>这是为了增加高度</p>??
<p>这是为了增加高度</p>??
<p>这是为了增加高度</p>??
<p>这是为了增加高度</p>??
<p>这是为了增加高度</p>??
<p>这是为了增加高度</p>??
<p>这是为了增加高度</p>??
<p>这是为了增加高度</p>??
<p>这是为了增加高度</p>??
<p>这是为了增加高度</p>??
<p>这是为了增加高度</p>??
<p>这是为了增加高度</p>??
<p>这是为了增加高度</p>??
<p>这是为了增加高度</p>??
<p>这是为了增加高度</p>??
<p>这是为了增加高度</p>??
<p>End</p>?
<div class=fixed>position: fixed;我始终在屏幕左上角哦</div>??
</body>??
</html>??

可能你要将这个板块定位在右上角或者右下角,以上2种烦死都要将right:17px;为什么不是right:0呢?

如果您自己做过板块定位在右上角、右下角或者右边的某个位置这样的实例就会发现这个问题,其实fixed元素的绝对位置是相对于HTML元素来说,而滚动条是body元素的,这是设置right:17px的原因就是要减去这个滚动条的宽度。

3.JS模拟解决方案:

demo: https://www.html.cn/demo/position_fixed/POSITION_fixed.html

这种方式比较繁琐,不做推广了,所以也就不做详细解释了。

赞(0) 打赏
未经允许不得转载:WEB前端开发 » 【IE6 BUG大全】position:fixed在IE6下的实现

评论 2

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #-49

    共享下某位牛人的解决方案
    test

    var ie6 = !window.XMLHttpRequest;
    var a = document.getElementById(‘a’);
    a.style.position = ie6 ? ‘absolute’ : ‘fixed’;
    a.style.right = 0;
    a.style.bottom = 0;

    if (ie6) {
    alert(“”);
    window.onscroll = function() {
    a.className = a.className;
    };
    }

    jun9年前 (2010-02-26)回复
  2. #-48

    以上的IE6hack能模拟出fixed的效果,不过在滚动条滚动时会出现页面抖动现象,解决方法是给body任意一张不存在的图片作为背景,在项目中我的解决方法是:

    body{background:transparent url(“test.png”) repeat scroll -999em 0;}//一张不存在的图片
    .fixed{position:absolute;top:expression(eval(document.body.scrollTop + 50));}

    happyjlq8年前 (2011-03-23)回复

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏