IE6访问器不适用固定不动精准定位（position：fi

日期：2020-12-13 类型：科技新闻 

关键词：制作小程序，小程序商城，扫码点餐小程序，微信小程序开店的步骤，牛刀小程序

　　今日在学习培训的情况下，忽然发如今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
};

上一篇：chrome表单全自动填充致使input文字框情况变为偏黄 返回下一篇：IE适配css3圆角的完成编码