让position:fixed在IE6中工作妙招

开发 前端
众所周知IE6不支持position:fixed,这个bug与IE6的双倍margin和不支持PNG透明等bug一样臭名昭著。这里和大家分享一下让position:fixed在IE6中工作的方法。

本文和大家重点讨论一下如何让position:fixed在IE6中工作,众所周知IE6不支持position:fixed,这个bug与IE6的双倍margin和不支持PNG透明等bug一样臭名昭著。到底有什么妙招让position:fixed在IE6中工作呢,请看下文详细介绍。

如何让position:fixed在IE6中工作

众所周知IE6不支持position:fixed,这个bug与IE6的双倍margin和不支持PNG透明等bug一样臭名昭著。前些天我做自己的博客模板的时候,遇到了这个问题。当时就简单的无视了IE6——尽管有几个使用IE6的朋友,一起BS我……但是对于大项目或商业网站,如果有用到这个属性的时候,是不可能直接无视的。

如何让position:fixed在IE6中工作的?

本文所使用的技巧是用了一条InternetExplorer的CSS表达式(expression)。你不可以直接使用该表达式,因为它可能会因为缓存而不更新。

解决这一点的最简单的方式是使用eval包裹你的语句。

如何解决“振动”的问题?

显然IE有一个多步的渲染进程。当你滚动或调整你的浏览器大小的时候,它将重置所有内容并重画页面,这个时候它就会重新处理css表达式。这会引起一个丑陋的“振动”bug,在此处固定位置的元素需要调整以跟上你的(页面的)滚动,于是就会“跳动”。

解决此问题的技巧就是使用background-attachment:fixed为body或html元素添加一个background-image。这就会强制页面在重画之前先处理CSS。因为是在重画之前处理CSS,它也就会同样在重画之前首先处理你的CSS表达式。这将让你实现***的平滑的固定位置元素!

这个方案并不是我提供的。我是在网上的某个地方读到这些的。如果你知道是谁原创了这个方法,请告诉前端观察。我发现的另外一个小技巧是,你根本无需一个真实的图片!你可以使用一个about:blank替代一个spacer.gif图片,而且它工作的同样出色。

CSSCode

  1. /*让position:fixed在IE6下可用!*/  
  2.  
  3. .fixed-top/*头部固定*/{position:fixed;bottom:auto;top:0px;}  
  4. .fixed-bottom/*底部固定*/{position:fixed;bottom:0px;top:auto;}  
  5. .fixed-left/*左侧固定*/{position:fixed;right:auto;left:0px;}  
  6. .fixed-right/*右侧固定*/{position:fixed;right:0px;left:auto;}  
  7. /*上面的是除了IE6的主流浏览器通用的方法*/  
  8. *html,*htmlbody/*修正IE6振动bug*/{background-image:url(about:blank);background-attachment:fixed;}  
  9. *html.fixed-top/*IE6头部固定*/{position:absolute;bottom:auto;top:expression(eval(document.documentElement.scrollTop));}  
  10. *html.fixed-right/*IE6右侧固定*/{position:absolute;right:auto;left:expression(eval  
  11.  
  12. (document.documentElement.scrollLeft+document.documentElement.clientWidth-this.offsetWidth)  
  13.  
  14. -(parseInt(this.currentStyle.marginLeft,10)||0)-(parseInt(this.currentStyle.marginRight,10)||0));}  
  15. *html.fixed-bottom/*IE6底部固定*/{position:absolute;bottom:auto;top:expression(eval(document.  
  16.  
  17. documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)  
  18.  
  19. ||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));}  
  20. *html.fixed-left/*IE6左侧固定*/{position:absolute;right:auto;left:expression(eval(document.documentElement.scrollLeft));}  

 更新:添加border、padding和margin支持!

Note:如果你不需要支持margin,可以将所有的`parseInt`部分去掉。

Note:我只在标准模式下进行了测试。

【编辑推荐】

  1. IE6双倍margin间距两大解决方案
  2. 探究IE8与IE7具体功能中窗口功能按钮的变化
  3. IE6 IE7 IE8三个版本的CSS兼容速查手册
  4. IE6下使用CSS定义DIV高度行之有效的办法
  5. 技术前沿 一段JS代码轻松解决IE6-IE8的兼容性问题

 

责任编辑:佚名 来源: webjx.com
相关推荐

2010-09-15 14:22:05

IE6position

2010-09-15 14:14:29

IE6position

2010-08-19 09:37:35

IE6fixed

2010-08-19 10:33:54

IE6position:fi

2010-08-20 13:15:54

IE6IE7IE8

2010-08-18 10:37:16

IE6IE7IE8

2010-09-15 11:08:48

CSSIE6IE7

2009-08-14 09:20:40

抵制IE6

2010-10-08 14:39:43

IE6DIVIE7

2010-02-01 08:41:23

GoogleIE6

2010-08-19 10:13:25

marginFFIE6

2010-08-19 14:43:49

IE6IE7IE8

2010-08-18 09:11:11

IE6

2010-03-06 08:52:17

2009-12-01 09:25:09

微软IE6用户升级

2013-04-22 09:32:36

TwitterIE6IE7

2011-11-08 11:07:26

2010-08-18 15:41:38

IE6E7Firefox

2010-09-02 16:18:33

CSSDIVIE6

2010-08-19 09:29:26

hoverIE6
点赞
收藏

51CTO技术栈公众号