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支持firefox,ie7页面布局拖拽效果代码
Dec 20 Javascript
学习ExtJS fit布局使用说明
Oct 08 Javascript
JavaScript 布尔操作符解析  &amp;&amp; || !
Aug 10 Javascript
javascript列表框操作函数集合汇总
Nov 28 Javascript
javascript实现简单的页面右下角提示信息框
Jul 31 Javascript
超详细的javascript数组方法汇总
Nov 21 Javascript
BootStrap实现带有增删改查功能的表格(DEMO详解)
Oct 26 Javascript
js实现砖头在页面拖拉效果
Nov 20 Javascript
Angular实现可删除并计算总金额的购物车功能示例
Dec 26 Javascript
JavaScript代码实现txt文件的上传预览功能
Mar 27 Javascript
js计算两个日期间的天数月的实例代码
Sep 20 Javascript
JS实现省市县三级下拉联动
Apr 10 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在线生成ico文件的代码
2007/10/09 PHP
发款php蜘蛛统计插件只要有mysql就可用
2010/10/12 PHP
php强制运行广告的方法
2014/12/01 PHP
php使用memcoder将视频转成mp4格式的方法
2015/03/12 PHP
php使用环形链表解决约瑟夫问题完整示例
2018/08/07 PHP
jQuery ajax+PHP实现的级联下拉列表框功能示例
2019/02/12 PHP
jquery 简单的进度条实现代码
2010/03/11 Javascript
java与javascript之间json格式数据互转介绍
2013/10/29 Javascript
快速解决jquery之get缓存问题的最简单方法介绍
2013/12/19 Javascript
jQuery大于号(&gt;)选择器的作用解释
2015/01/13 Javascript
微信小程序 向左滑动删除功能的实现
2017/03/10 Javascript
jQuery扇形定时器插件pietimer使用方法详解
2017/07/18 jQuery
详解Express笔记之动态渲染HTML(新手入坑)
2018/12/13 Javascript
微信小程序textarea层级过高(盖住其他元素)问题的解决办法
2019/03/04 Javascript
python实现文件名批量替换和内容替换
2014/03/20 Python
Python编程语言的35个与众不同之处(语言特征和使用技巧)
2014/07/07 Python
在Python的Flask框架下使用sqlalchemy库的简单教程
2015/04/09 Python
Django框架中处理URLconf中特定的URL的方法
2015/07/20 Python
Python轻量级ORM框架Peewee访问sqlite数据库的方法详解
2017/07/20 Python
对python 矩阵转置transpose的实例讲解
2018/04/17 Python
Python JSON编解码方式原理详解
2020/01/20 Python
Python基于pillow库实现生成图片水印
2020/09/14 Python
详解HTML5中的拖放事件(Drag 和 drop)
2016/11/14 HTML / CSS
详解移动端html5页面长按实现高亮全选文本内容的兼容解决方案
2016/12/03 HTML / CSS
英国知名美妆护肤在线商城:Zest Beauty
2018/04/24 全球购物
意大利灯具购物网站:Lampade.it
2018/10/18 全球购物
班组长岗位职责
2014/03/03 职场文书
业务员简历自我评价
2014/03/06 职场文书
降消项目实施方案
2014/03/30 职场文书
安全生产专项整治方案
2014/05/06 职场文书
温馨提示标语
2014/06/26 职场文书
2014年乡镇工会工作总结
2014/12/02 职场文书
文明单位汇报材料
2014/12/24 职场文书
感恩信:写给爸爸妈妈的一封感谢信
2019/09/12 职场文书
如何解决.cuda()加载用时很长的问题
2021/05/24 Python
vue实现列表垂直无缝滚动
2022/04/08 Vue.js