js完美解决IE6不支持position:fixed的bug


Posted in Javascript onApril 24, 2015

先来看段代码

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>IE6 position:fixed bug</title>
<style>
*{padding:0;margin:0}
p{height:2000px}
#gs{border:1px solid #000;position:fixed;right:30px;top:120px}
</style>
<!--[if IE 6]>
<style type="text/css">
html{overflow:hidden}
body{height:100%;overflow:auto}
#gs{position:absolute}
</style>
<![endif]-->
</head>
<body>
<div id="rightform">
<p>11111111111111111</p>
<input id="gs" name="gs" type="text" value="" />
</div>
</body>
</html>

以上这段代码在网上很常见,通过设置html{overflow:hidden}和body{height:100%;overflow:auto}来实现ie6下position:fixed效果,但这种办法有个缺陷,那就是:这会使页面上原有的absolute、relation都变成fixed的效果,在这里我就不做demo了,如果有怀疑,可以自己去试验一下。

于是我找了下资料,发现可以通过一条Internet Explorer的CSS表达式(expression)来完美的实现ie6下position:fixed效果,css代码如下:

/* 除IE6浏览器的通用方法 */
.ie6fixedTL{position:fixed;left:0;top:0}
.ie6fixedBR{position:fixed;right:0;bottom:0}
/* IE6浏览器的特有方法 */
* html .ie6fixedTL{position:absolute;left:expression(eval(document.documentElement.scrollLeft));top:expression(eval(document.documentElement.scrollTop))}
* html .ie6fixedBR{position:absolute;left:expression(eval(document.documentElement.scrollLeft+document.documentElement.clientWidth-this.offsetWidth)-(parseInt(this.currentStyle.marginLeft,10)||0)-(parseInt(this.currentStyle.marginRight,10)||0));top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)))}

上面代码可以直接使用了,如果要设置元素悬浮边距,要分别为设置两次,比如我要让某个元素距顶部10个像素,距左部也是10个像素,那就要这样子写:

/* 除IE6浏览器的通用方法 */
.ie6fixedTL{position:fixed;left:10px;top:10px}
/* IE6浏览器的特有方法 */
* html .ie6fixedTL{position:absolute;left:expression(eval(document.documentElement.scrollLeft+10));top:expression(eval(document.documentElement.scrollTop+10))}

这样一来,IE6下实现position:fixed的效果解决了,而且也不会影响到其他的absolute、relation,但还有一个问题,就是悬浮的元素会出现振动

IE有一个多步的渲染进程。当你滚动或调整你的浏览器大小的时候,它将重置所有内容并重画页面,这个时候它就会重新处理css表达式。这会引起一个丑陋的“振动”bug,在此处固定位置的元素需要调整以跟上你的(页面的)滚动,于是就会“跳动”。
解决此问题的技巧就是使用background-attachment:fixed为body或html元素添加一个background-image。这就会强制页面在重画之前先处理CSS。因为是在重画之前处理CSS,它也就会同样在重画之前首先处理你的CSS表达式。这将让你实现完美的平滑的固定位置元素!
然后我发现background-image无需一张真实的图片,设置成about:blank就行了。

下面附上完整代码

/* 除IE6浏览器的通用方法 */
.ie6fixedTL{position:fixed;left:0;top:0}
.ie6fixedBR{position:fixed;right:0;bottom:0}
/* IE6浏览器的特有方法 */
/* 修正IE6振动bug */
* html,* html body{background-image:url(about:blank);background-attachment:fixed}
* html .ie6fixedTL{position:absolute;left:expression(eval(document.documentElement.scrollLeft));top:expression(eval(document.documentElement.scrollTop))}
* html .ie6fixedBR{position:absolute;left:expression(eval(document.documentElement.scrollLeft+document.documentElement.clientWidth-this.offsetWidth)-(parseInt(this.currentStyle.marginLeft,10)||0)-(parseInt(this.currentStyle.marginRight,10)||0));top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)))}

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
将HTMLCollection/NodeList/伪数组转换成数组的实现方法
Jun 20 Javascript
IE中图片的onload事件无效问题和解决方法
Jun 06 Javascript
JQuery中$(document)是什么意思有什么作用
Jul 21 Javascript
JS/Jquery判断对象为空的方法
Jun 11 Javascript
jQuery1.9.1源码分析系列(十六)ajax之ajax框架
Dec 04 Javascript
基于jQuery实现Ajax验证用户名是否存在实例
Mar 30 Javascript
webpack打包单页面如何引用的js
Jun 07 Javascript
weui框架实现上传、预览和删除图片功能代码
Aug 24 Javascript
JavaScript去掉数组重复项的方法分析【测试可用】
Jul 19 Javascript
el-select数据过多懒加载的解决(loadmore)
May 29 Javascript
使用layui实现的左侧菜单栏以及动态操作tab项方法
Sep 10 Javascript
Jquery cookie插件实现原理代码解析
Aug 04 jQuery
JS实现简单的键盘打字的效果
Apr 24 #Javascript
javascript中replace( )方法的使用
Apr 24 #Javascript
javascript实现漂亮的拖动层,窗口拖拽特效
Apr 24 #Javascript
jQuery中dom元素上绑定的事件详解
Apr 24 #Javascript
原生js制作简单的数字键盘
Apr 24 #Javascript
Javascript中arguments和arguments.callee的区别浅析
Apr 24 #Javascript
Node.js实现Excel转JSON
Apr 24 #Javascript
You might like
PHP return语句的另一个作用
2014/07/30 PHP
jQuery实现自动调整字体大小的方法
2015/06/15 Javascript
贴近用户体验的Jquery日期、时间选择插件
2015/08/19 Javascript
基于jQuery实现放大镜特效
2020/10/19 Javascript
jQuery animate和CSS3相结合实现缓动追逐效果附源码下载
2016/04/18 Javascript
jQuery检查元素存在性(推荐)
2016/09/17 Javascript
实现点击下箭头变上箭头来回切换的两种方法【推荐】
2016/12/14 Javascript
Vue 短信验证码组件开发详解
2017/02/14 Javascript
详解JS数组Reduce()方法详解及高级技巧
2017/08/18 Javascript
js es6系列教程 - 基于new.target属性与es5改造es6的类语法
2017/09/02 Javascript
vue中v-model动态生成的实例详解
2017/10/27 Javascript
vue-cli项目中使用公用的提示弹层tips或加载loading组件实例详解
2018/05/28 Javascript
Taro集成Redux快速上手的方法示例
2018/06/21 Javascript
angular4自定义组件非input元素实现ngModel双向数据绑定的方法
2018/12/28 Javascript
详解Vue 全局变量,局部变量
2019/04/17 Javascript
vue router 跳转时打开新页面的示例方法
2019/07/28 Javascript
js贪心算法 钱币找零问题代码实例
2019/09/11 Javascript
八种Vue组件间通讯方式合集(推荐)
2020/08/18 Javascript
Python导出DBF文件到Excel的方法
2015/07/25 Python
Python文件夹与文件的相关操作(推荐)
2016/07/25 Python
总结用Pdb库调试Python的方式及常用的命令
2016/08/18 Python
python集合的创建、添加及删除操作示例
2019/10/08 Python
python安装本地whl的实例步骤
2019/10/12 Python
基于django2.2连oracle11g解决版本冲突的问题
2020/07/02 Python
使用Python实现NBA球员数据查询小程序功能
2020/11/09 Python
美国蔬菜和植物种子公司:Burpee
2017/02/01 全球购物
Made in Design意大利:现代家具、名家灯具和装饰
2020/10/27 全球购物
将n个数按输入顺序的逆序排列,用函数实现
2012/11/14 面试题
毕业生自我鉴定
2013/12/04 职场文书
环保倡议书50字
2014/05/15 职场文书
传播学专业毕业生自荐书
2014/07/01 职场文书
人事经理岗位职责范本
2014/08/04 职场文书
南京南京观后感
2015/06/02 职场文书
圆明园纪录片观后感
2015/06/03 职场文书
心术观后感
2015/06/11 职场文书
OpenCV实现反阈值二值化
2021/11/17 Java/Android