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 相关文章推荐
js DOM模型操作
Dec 28 Javascript
如何将一个String和多个String值进行比较思路分析
Apr 22 Javascript
基于Jquery+Ajax+Json实现分页显示附效果图
Jul 30 Javascript
Knockoutjs 学习系列(二)花式捆绑
Jun 07 Javascript
JS实现简单的tab切换选项卡效果
Sep 21 Javascript
深入理解javascript函数参数与闭包
Dec 12 Javascript
js模拟微博发布消息
Feb 23 Javascript
利用node.js如何搭建一个简易的即时响应服务器
May 28 Javascript
详解在Vue中如何使用axios跨域访问数据
Jul 07 Javascript
使用js获取伪元素的content实例
Oct 24 Javascript
vue路由中前进后退的一些事儿
May 18 Javascript
Vue的transition-group与Virtual Dom Diff算法的使用
Dec 09 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
用PHP实现将GB编码转换为UTF8
2006/11/25 PHP
Ajax实时验证用户名/邮箱等是否已经存在的代码打包
2011/12/01 PHP
PHP中session变量的销毁
2014/02/27 PHP
PHP CURL使用详解
2019/03/21 PHP
window.location.href = window.location.href 跳转无反应 a超链接onclick事件写法
2013/08/21 Javascript
javascript学习笔记之10个原生技巧
2014/05/21 Javascript
javascript实例分享---具有立体效果的图片特效
2014/06/08 Javascript
深入理解requestAnimationFrame的动画循环
2016/09/20 Javascript
微信公众号  提示:Unauthorized API function 问题解决方法
2016/12/05 Javascript
JavaScript正则表达式exec/g实现多次循环用法示例
2017/01/17 Javascript
微信小程序 template模板详解及实例代码
2017/03/09 Javascript
BootStrap+Mybatis框架下实现表单提交数据重复验证
2017/03/23 Javascript
在Vue组件化中利用axios处理ajax请求的使用方法
2017/08/25 Javascript
细说webpack源码之compile流程-入口函数run
2017/12/26 Javascript
详解Angular结合zTree异步加载节点数据
2018/01/20 Javascript
vue.js打包之后可能会遇到的坑!
2018/06/03 Javascript
javascript实现点击按钮切换轮播图功能
2020/09/23 Javascript
详细介绍Python语言中的按位运算符
2013/11/26 Python
基于python的字节编译详解
2017/09/20 Python
python 下 CMake 安装配置 OPENCV 4.1.1的方法
2019/09/30 Python
Python代码块及缓存机制原理详解
2019/12/13 Python
python 非线性规划方式(scipy.optimize.minimize)
2020/02/11 Python
详解使用Python写一个向数据库填充数据的小工具(推荐)
2020/09/11 Python
matplotlib 画动态图以及plt.ion()和plt.ioff()的使用详解
2021/01/05 Python
香港优质食材和美酒专门店:FoodWise
2017/09/01 全球购物
DC Shoes荷兰官方网站:美国极限运动品牌
2019/10/22 全球购物
报关简历自我评价怎么写
2013/09/19 职场文书
会计职业生涯规划范文
2014/01/04 职场文书
工会主席岗位责任制
2014/02/11 职场文书
大学竞选班长演讲稿
2014/04/24 职场文书
酒店管理失职检讨书
2014/09/16 职场文书
感谢信范文大全
2015/01/23 职场文书
三峡人家导游词
2015/01/31 职场文书
2019年年中工作总结讲话稿模板
2019/03/25 职场文书
Nginx配置Https安全认证的实现
2021/05/26 Servers
volatile保证可见性及重排序方法
2022/08/05 Java/Android