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 相关文章推荐
javascript面向对象入门基础详细介绍
Sep 05 Javascript
jquery1.83 之前所有与异步列队相关的模块详细介绍
Nov 13 Javascript
js实现身份证号码验证的简单实例
Feb 19 Javascript
jQuery判断checkbox(复选框)是否被选中以及全选、反选实现代码
Feb 21 Javascript
Javascript前端UI框架Kit使用指南之kitjs事件管理
Nov 28 Javascript
快速学习jQuery插件 Form表单插件使用方法
Dec 01 Javascript
AngularJS Bootstrap详细介绍及实例代码
Jul 28 Javascript
jQuery实现动态添加、删除按钮及input输入框的方法
Apr 27 jQuery
详解vue-router传参的两种方式
Sep 10 Javascript
详解vue挂载到dom上会发生什么
Jan 20 Javascript
vue基本使用--refs获取组件或元素的实例
Nov 07 Javascript
Vue父子之间值传递的实例教程
Jul 02 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防止post重复提交数据的简单例子
2014/06/07 PHP
php中Ioc(控制反转)和Di(依赖注入)
2017/05/07 PHP
Jquery实现无刷新DropDownList联动实现代码
2010/03/08 Javascript
JavaScript arguments 多参传值函数
2010/10/24 Javascript
使用jquery mobile做幻灯播放效果实现步骤
2013/01/04 Javascript
javascript跨域的4种方法和原理详解
2014/04/08 Javascript
JQuery实现当鼠标停留在某区域3秒后自动执行
2014/09/09 Javascript
JavaScript中的object转换成number或string规则介绍
2014/12/31 Javascript
javascript 动态创建表格
2015/01/08 Javascript
TinyMCE提交AjaxForm获取不到数据的解决方法
2015/03/05 Javascript
javascript笛卡尔积算法实现方法
2015/04/08 Javascript
JavaScript动态设置div的样式的方法
2015/12/26 Javascript
JavaScript实现打开链接页面的方式汇总
2016/06/02 Javascript
JS实现的系统调色板完整实例
2016/12/21 Javascript
在Vue中使用echarts的实例代码(3种图)
2017/07/10 Javascript
详解Vue用cmd创建项目
2019/02/12 Javascript
详解JavaScript数据类型和判断方法
2020/09/04 Javascript
python写入中英文字符串到文件的方法
2015/05/06 Python
Django自定义用户认证示例详解
2018/03/14 Python
Python实现矩阵相乘的三种方法小结
2018/07/26 Python
Python跳出多重循环的方法示例
2019/07/03 Python
python selenium操作cookie的实现
2020/03/18 Python
python输出数学符号实例
2020/05/11 Python
详解基于Scrapy的IP代理池搭建
2020/09/29 Python
德国鞋子网上商店:Omoda.de
2017/03/31 全球购物
照片礼物和装饰:MyPhoto
2019/11/02 全球购物
金智子午JAVA面试题
2015/09/04 面试题
中学教师实习自我鉴定
2013/09/28 职场文书
行政人员工作职责
2013/12/05 职场文书
迟到检讨书300字
2014/02/14 职场文书
党员教师个人对照检查材料范文
2014/09/25 职场文书
法定代表人授权委托书格式
2014/10/14 职场文书
惹女朋友生气检讨书
2015/05/06 职场文书
浏览器常用基本操作之python3+selenium4自动化测试(基础篇3)
2021/05/21 Python
css中:last-child不生效的解决方法
2022/08/05 HTML / CSS
win10截图快捷键win+shift+s没有反应无法截图怎么解决?
2022/08/14 数码科技