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 相关文章推荐
JObj预览一个JS的框架
Mar 13 Javascript
jquery事件重复绑定的快速解决方法
Jan 03 Javascript
jQuery+PHP星级评分实现方法
Oct 02 Javascript
JS函数的几种定义方式分析
Dec 17 Javascript
JavaScript中无法通过div.style.left获取值的解决方法
Feb 19 Javascript
JS实现简易刻度时钟示例代码
Mar 11 Javascript
使用JS组件实现带ToolTip验证框的实例代码
Aug 23 Javascript
使用Vue动态生成form表单的实例代码
Apr 26 Javascript
在Vue methods中调用filters里的过滤器实例
Aug 30 Javascript
浅谈HTTP 缓存的那些事儿
Oct 17 Javascript
JS使用H5实现图片预览功能
Sep 30 Javascript
js回调函数仿360开机
Dec 26 Javascript
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
ThinkPHP安装和设置
2015/07/27 PHP
JS 参数传递的实际应用代码分析
2009/09/13 Javascript
ASP.NET jQuery 实例9  通过控件hyperlink实现返回顶部效果
2012/02/03 Javascript
基于jquery的跟随屏幕滚动代码
2012/07/24 Javascript
基于JavaScript 数据类型之Boolean类型分析介绍
2013/04/19 Javascript
js简单的弹出框有关闭按钮
2014/05/05 Javascript
js操作模态窗口及父子窗口间相互传值示例
2014/06/09 Javascript
js对字符串进行编码的方法总结(推荐)
2016/11/10 Javascript
原生js实现手风琴功能(支持横纵向调用)
2017/01/13 Javascript
详解React 在服务端渲染的实现
2017/11/16 Javascript
Vue props用法详解(小结)
2018/07/03 Javascript
微信小程序实现滴滴导航tab切换效果
2018/07/24 Javascript
js中的reduce()函数讲解
2019/01/18 Javascript
微信小程序实现弹幕墙(祝福墙)
2020/11/18 Javascript
[02:49:21]2019完美盛典全程录像
2019/12/08 DOTA
[01:01:01]完美世界DOTA2联赛循环赛 GXR vs FTD BO2第一场 10.29
2020/10/29 DOTA
python快速查找算法应用实例
2014/09/26 Python
python基于xmlrpc实现二进制文件传输的方法
2015/06/02 Python
Python实现嵌套列表及字典并按某一元素去重复功能示例
2017/11/30 Python
利用Python实现原创工具的Logo与Help
2018/12/03 Python
解决Python pandas plot输出图形中显示中文乱码问题
2018/12/12 Python
对python同一个文件夹里面不同.py文件的交叉引用方法详解
2018/12/15 Python
Python算法中的时间复杂度问题
2019/11/19 Python
Python assert关键字原理及实例解析
2019/12/13 Python
Pytorch释放显存占用方式
2020/01/13 Python
韩国流行时尚女装网站:Dintchina(中文)
2018/07/19 全球购物
绩效工资分配方案
2014/01/18 职场文书
国家助学金获奖感言
2014/01/31 职场文书
药学专业学生的自我评价分享
2014/02/06 职场文书
环保建议书
2014/03/12 职场文书
师德建设实施方案
2014/03/21 职场文书
我的长生果教学反思
2014/04/28 职场文书
2014镇党委书记党建工作汇报材料
2014/11/02 职场文书
小学中等生评语
2014/12/29 职场文书
青岛海底世界导游词
2015/02/11 职场文书
浅谈Python类的单继承相关知识
2021/05/12 Python