IE6访问器不适用固定不动精准定位(position:fi

2021-03-11 09:55 jianzhan

  今日在学习培训的情况下,忽然发如今IE6访问器下,position:fixed无论用了:

拷贝编码
编码以下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
</head>
<body>
<div style="width:600px;height:2000px;background-color:#f90;">一切正常一般流元素</div>
<div style="position:fixed;bottom:10px;left:50px;width:400px;height:200px;background-color:#111;color:#fff;">position:fixed元素</div>
</body>
</html>

  上面的编码在IE6中开启,实际效果以下

  而在别的访问器(IE7+、firefox、opera、safari、chrome)下则一切正常显示信息:

  历经数次检测,原先不只在IE6下,在IE7、IE8访问器下,若是文本文档应用的是奇异(quirk)方式也会致使这个难题。这也难怪,当IE7、8应用奇异方式时,3D渲染模块将以贴近IE6的3D渲染方式来分析CSS。最终,我得出了下列结果:

   IE6、IE7(quirk方式)、IE8(quirk方式) 访问器将 'position' 特点的 fixed 值作为不正确值解决。从而致使应用固定不动精准定位的元素应用 'position' 的默认设置值 static。即这个元素在 此时 变为了一般流中的元素,这必定会致使合理布局移位等难题。

  处理计划方案:   

  在 IE6、IE7(quirk方式)、IE8(quirk方式)中为固定不动精准定位元素设定 '_position:absolute',再根据 JavaScript 脚本制作或 CSS Expression 动态性设定其偏位量,可是我发现只能完成在最底部和最顶部固定不动。要想设定实际的部位还必须相互配合_margin。

使元素固定不动在访问器的顶部

拷贝编码
编码以下:

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

使元素固定不动在访问器的底部

拷贝编码
编码以下:

#bottom {
_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改动在其中的标值操纵元素的部位。

  看到这里,你1定认为早已完事了。NO!也有bug:被固定不动精准定位的元素在翻转翻转条的情况下会出現1闪1闪的状况。处理这个难题的方法是在 CSS 文档中添加:

拷贝编码
编码以下:

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

或:

拷贝编码
编码以下:

body {
_background-attachment:fixed;
_background-image:url(about:blank);
}

  自然,还可以用吧javascript方式处理,但是有点屈才:

拷贝编码
编码以下:

window.onresize = window.onscroll = function(){
//code
};