修正IE6不支持position:fixed的bug[译]
作者:神采飞扬 来源:前端观察 发布时间:2009-08-01 12:44:00
众所周知IE6不支持position:fixed,这个bug与IE6的双倍margin和不支持PNG透明等bug一样臭名昭著。前些天我做自己的博客模板的时候,遇到了这个问题。当时就简单的无视了IE6——尽管有几个使用IE6的朋友,一起BS我……但是对于大项目或商业网站,如果有用到这个属性的时候,是不可能直接无视的。
你是如何让position:fixed在IE6中工作的?
本文所使用的技巧是用了一条Internet Explorer的CSS表达式(expression)。你不可以直接使用该表达式,因为它可能会因为缓存而不更新。解决这一点的最简单的方式是使用eval
包裹你的语句。
如何解决“振动”的问题?
显然IE有一个多步的渲染进程。当你滚动或调整你的浏览器大小的时候,它将重置所有内容并重画页面,这个时候它就会重新处理css表达式。这会引起一个丑陋的“振动”bug,在此处固定位置的元素需要调整以跟上你的(页面的)滚动,于是就会“跳动”。
解决此问题的技巧就是使用background-attachment:fixed
为body或html元素添加一个background-image。这就会强制页面在重画之前先处理CSS。因为是在重画之前处理CSS,它也就会同样在重画之前首先处理你的CSS表达式。这将让你实现完美的平滑的固定位置元素!
这个方案并不是我提供的。我是在网上的某个地方读到这些的。如果你知道是谁原创了这个方法,请告诉前端观察。
我发现的另外一个小技巧是,你根本无需一个真实的图片!你可以使用一个about:blank
替代一个spacer.gif图片,而且它工作的同样出色。
/*让position:fixed在IE6下可用! */
.fixed-top /* 头部固定 */{position:fixed;bottom:auto;top:0px;}
.fixed-bottom /* 底部固定 */{position:fixed;bottom:0px;top:auto;}
.fixed-left /* 左侧固定 */{position:fixed;right:auto;left:0px;}
.fixed-right /* 右侧固定 */{position:fixed;right:0px;left:auto;}
/* 上面的是除了IE6的主流浏览器通用的方法 */
* html,* html body /* 修正IE6振动bug */{background-image:url(about:blank);background-attachment:fixed;}
* html .fixed-top /* IE6 头部固定 */{position:absolute;bottom:auto;top:expression(eval(document.documentElement.scrollTop));}
* html .fixed-right /* IE6 右侧固定 */ {position:absolute;right:auto;left:expression(eval(document.documentElement.scrollLeft+document.documentElement.clientWidth-this.offsetWidth)-(parseInt(this.currentStyle.marginLeft,10)||0)-(parseInt(this.currentStyle.marginRight,10)||0));}
* html .fixed-bottom /* IE6 底部固定 */{position:absolute;bottom:auto;top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));}
* html .fixed-left /* IE6 左侧固定 */{position:absolute;right:auto;left:expression(eval(document.documentElement.scrollLeft));}
更新: 添加border、padding 和margin 支持!
Note: 如果你不需要支持margin,可以将所有的`parseInt`部分去掉。
Note: 我只在标准模式下进行了测试。
猜你喜欢
- 大家一定使用过 phpmyadmin 里面的数据库导入,导出功能,非常方便。但是在实际应用中,我发现如下几个问题:1、数据库超过一定尺寸,比
- 阅读系列教程上一篇:FrontPage2002简明教程二:文字与图像的处理通常网页的布局使用到的是FrontPage 2002中的表格和框架
- 在我供职的公司不仅仅拥有Oracle数据库,同时还拥有SQL Server数据库,所以我经常遇见人们向我提两种问题。 第一种通常都是以&qu
- 来与大家分享。稍加改造就可以实现更强大的功能了。用下面的代码就可以简单的批量导出picasa相册的外链了。代码如下:<%@LANGUA
- 一个不错的js效果,实现了图片预加载,并实时显示图片加载进度。<script> var l=0; var i
- 一、MySQL数据库的实例管理器概述:1、MySQL数据库的实例管理器(IM)是通过TCP/IP端口运行的后台程序,用来监视和管理MySQL
- 一个能对访问者进行编号、记录访问次数、IP、时间的统计制作实例我以ACCESS库为例子,其实用SQL SERVER库也只要改一下链接库的语句
- 这个可应用于所有浏览器中.<SCRIPT language=javascript>var leave=true; functio
- 此文刊登在《程序员》三月期,有删改提到安全问题,首先想到应付这些问题的应该是系统管理员以及后台开发工程师们,而前端开发工程师似乎离这些问题很
- 兼容IE6的第一步就是单独对IE进行兼容,你针对IE6所写的代码只影响IE6;有几种方法可以区分开IE6:IE特有条件注释、CSS选择器、J
- 死锁是指在某组资源中,两个或两个以上的线程在执行过程中,在争夺某一资源时而造成互相等待的现象,若无外力的作用下,它们都将无法推进下去,死时就
- 不知道做网络程序的朋友是否重视COOKIES作用域对于多域名或 主域与WWW二级域名同时共用一站点,设置Cookies的作用域,让整个网站用
- 如何做一个可以让人家申请使用的计数器? 好了,我们来做一个与页面分离的计数器,是文本型的啦。这也很简单,
- 把程序放到一个文件中,然后包含再call就可以了。(JMAIL4.3)<%'警告函数sub w_msg(messag
- 虽然以前我写过IE6、IE7、IE8共存的解决方案,但是看到IETester这个软件以后那些都已经没有意义了(那些办法副作用比较大,而且实现
- 我们在前面的几节中分别讲了提高网站性能中内容、服务器、JavaScript和CSS等方面的内容。除此之外,图片和Coockie也是我们网站中
- 简单的说,组织体系指的就是组织信息的方式。看了一堆拗口的定义后,我根据自己的理解画了下面这个图:从上图看出,同样的图形元素由于采用了不同的组
- 说到排序,我想起一个故事,大意是说唐僧师徒西游美利坚,孙悟空买了本词典,开始逐条背诵单词。他们第一次下美国馆子的时候,不管服务员推荐什么,孙
- <style> body {margin:10px;background-color:#ffffff;margin-t
- function createobj() { if (window.ActiveXObject)&n