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 相关文章推荐
基于jquery的多彩百分比 动态进度条 投票效果显示效果实现代码
Aug 28 Javascript
将字符串中由空格隔开的每个单词首字母大写
Apr 06 Javascript
原生JavaScript实现合并多个数组示例
Sep 21 Javascript
基于jquery固定于顶部的导航响应浏览器滚动条事件
Nov 02 Javascript
javascript下使用Promise封装FileReader
Feb 19 Javascript
jQuery插件FusionCharts实现的3D帕累托图效果示例【附demo源码】
Mar 25 jQuery
不得不看之JavaScript构造函数及new运算符
Aug 21 Javascript
浅谈vue的iview列表table render函数设置DOM属性值的方法
Sep 30 Javascript
Vue2.0学习之详解Vue 组件及父子组件通信
Dec 12 Javascript
vue实现城市列表选择功能
Jul 16 Javascript
基于vue实现探探滑动组件功能
May 29 Javascript
原生js+css实现tab切换功能
Sep 17 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+jQuery实现自动补全功能源码
2013/05/15 PHP
php中文字符串截取方法实例总结
2014/09/30 PHP
基于jQuery的ajax功能实现web service的json转化
2009/08/29 Javascript
百度Popup.js弹出框进化版 拖拽小框架发布 兼容IE6/7/8,Firefox,Chrome
2010/04/13 Javascript
Jquery Select操作方法集合脚本之家特别版
2010/05/17 Javascript
js 获取和设置css3 属性值的实现方法
2013/05/06 Javascript
JavaScript加强之自定义event事件
2013/09/21 Javascript
利用js制作html table分页示例(js实现分页)
2014/04/25 Javascript
jQuery中:checked选择器用法实例
2015/01/04 Javascript
基于Bootstrap+jQuery.validate实现表单验证
2016/05/30 Javascript
快速解决js动态改变dom元素属性后页面及时渲染的问题
2016/07/06 Javascript
jQuery版AJAX简易封装代码
2016/09/14 Javascript
js获取Get值的方法
2016/09/29 Javascript
使用JS代码实现点击按钮下载文件
2016/11/12 Javascript
js实现一个猜数字游戏
2017/03/31 Javascript
Vue input控件通过value绑定动态属性及修饰符的方法
2017/05/03 Javascript
利用JS动态生成隔行换色HTML表格的两种方法
2018/10/09 Javascript
vscode下vue项目中eslint的使用方法
2019/01/13 Javascript
在Web关闭页面时发送Ajax请求的实现方法
2019/03/07 Javascript
Vue 利用指令实现禁止反复发送请求的两种方法
2019/09/15 Javascript
Angular 多模块项目构建过程
2020/02/13 Javascript
[02:49:21]2019完美盛典全程录像
2019/12/08 DOTA
跟老齐学Python之让人欢喜让人忧的迭代
2014/10/02 Python
Python中的random()方法的使用介绍
2015/05/15 Python
python实现搜索指定目录下文件及文件内搜索指定关键词的方法
2015/06/28 Python
python3实现elasticsearch批量更新数据
2019/12/03 Python
Python通过kerberos安全认证操作kafka方式
2020/06/06 Python
英国礼品和生活方式品牌:Treat Republic
2020/11/21 全球购物
24岁生日感言
2014/01/13 职场文书
中文教师求职信
2014/02/22 职场文书
爱心捐助倡议书
2014/05/19 职场文书
事业单位考核材料
2014/05/21 职场文书
2014年教师节演讲稿
2014/09/03 职场文书
高中教师个人总结
2015/02/10 职场文书
Python制作一个随机抽奖小工具的实现
2021/07/07 Python
spring cloud eureka 服务启动失败的原因分析及解决方法
2022/03/17 Java/Android