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 如果改变span标签的是否隐藏属性
Oct 06 Javascript
在jquery中的ajax方法怎样通过JSONP进行远程调用
Apr 04 Javascript
javascript文件加载管理简单实现方法
Jul 25 Javascript
jquery中ajax跨域方法实例分析
Dec 18 Javascript
JavaScript数据类型学习笔记
Jan 25 Javascript
js改变html的原有内容实现方法
Oct 05 Javascript
浅谈jquery采用attr修改form表单enctype不起作用的问题
Nov 25 Javascript
解决webpack -p压缩打包react报语法错误的方法
Jul 03 Javascript
使用jQuery实现鼠标点击左右按钮滑动切换
Aug 04 jQuery
jQuery UI 实例讲解 - 日期选择器(Datepicker)
Sep 18 jQuery
基于Vue sessionStorage实现保留搜索框搜索内容
Jun 01 Javascript
从0到1学习JavaScript编写贪吃蛇游戏
Jul 28 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
星际争霸 Starcraft 编年史
2020/03/14 星际争霸
PHP转换文本框内容为HTML格式的方法
2016/07/20 PHP
php使用str_replace替换多维数组的实现方法分析
2017/06/15 PHP
PHP实现的防止跨站和xss攻击代码【来自阿里云】
2018/01/29 PHP
jQuery 方法大全方便学习参考
2010/02/25 Javascript
Javascript模块化编程(三)require.js的用法及功能介绍
2013/01/17 Javascript
JQuery对id中含有特殊字符的转义处理示例
2013/09/06 Javascript
Js判断参数(String,Array,Object)是否为undefined或者值为空
2013/11/04 Javascript
jQuery模拟点击A标记示例参考
2014/04/17 Javascript
jQuery中position()方法用法实例
2015/01/16 Javascript
基于JS代码实现图片在页面中旋转效果
2016/06/16 Javascript
JS正则子匹配实例分析
2016/12/22 Javascript
vue 简单自动补全的输入框的示例
2018/03/12 Javascript
vue.js实现标签页切换效果
2018/06/07 Javascript
微信小程序用户授权、位置授权及获取微信绑定手机号
2019/07/18 Javascript
Element图表初始大小及窗口自适应实现
2020/07/10 Javascript
js节流防抖应用场景,以及在vue中节流防抖的具体实现操作
2020/09/21 Javascript
基于openlayers实现角度测量功能
2020/09/28 Javascript
Vue通过阿里云oss的url连接直接下载文件并修改文件名的方法
2020/12/25 Vue.js
Python IDE PyCharm的基本快捷键和配置简介
2015/11/04 Python
Python2.7简单连接与操作MySQL的方法
2016/04/27 Python
python爬虫的工作原理
2017/03/05 Python
Python if语句知识点用法总结
2018/06/10 Python
python3实现域名查询和whois查询功能
2018/06/21 Python
用Python写一个模拟qq聊天小程序的代码实例
2019/03/06 Python
python 使用matplotlib 实现从文件中读取x,y坐标的可视化方法
2019/07/04 Python
老师对学生的评语
2014/04/18 职场文书
离婚协议书怎么写
2014/09/12 职场文书
小学生运动会通讯稿
2014/09/23 职场文书
股份转让协议书范本
2015/01/27 职场文书
解除合同协议书范本
2016/03/21 职场文书
写自招自荐信的绝招!
2019/04/19 职场文书
文明医院的标语集锦!
2019/07/24 职场文书
利用Nginx代理如何解决前端跨域问题详析
2021/04/02 Servers
Python批量解压&压缩文件夹的示例代码
2022/04/04 Python
三种方式清除vue路由跳转router-link的历史记录
2022/04/10 Vue.js