完美的IE6 position:fixed
七月 20th, 2009
Leave a comment
这个内容是老生常谈了,主要问题就是IE6不支持 position:fixed 引起的BUG.当我们去搜索解决这个bug的垮浏览器解决办法时,绝大多数结果都是说使用 position:absolute 来替代解决,可是我们真的解决了么?没有,因为当页面比较长的时候,拖动滚动条,那个fix的地方也相应的闪动.虽然最终会近似于需求的目标,但是不完美.那么如何解决这一问题呢?
造成这个问题的原因是fixed元素的绝对位置是相对于HTML元素,滚动条是body元素的(貌似ie6中他们的区别就是在于滚动条界限那里).
知道了原因,我们就大概知道如何解决了:
<!--[if IE 6]>
<style type="text/css">
html{overflow:hidden;}
body{height:100%;overflow:auto;}
#fixed {position:absolute;}
</style>
<!--[endif]-->没错,就是加上这样的一段code,现在看看完整的页面code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>IE6 position:fixed</title> <style> * { padding:0; margin:0; } #fixed { background-color:#ddd; border:1px solid #aaa; position:fixed; right:0; top:0; } </style> <!--[if IE 6]> <style type="text/css"> html{overflow:hidden;} body{height:100%;overflow:auto;} #fixed{position:absolute;right:17px;} </style> <!--[endif]--> </head> <body> <div style="height:2000px"></div> <div id="fixed"> FIXED </div> </body> </html>
from: 随网之舞
转载请注明: 出自 FlexHome原文链接:http://flex.desizen.com/ie6-position-fixed/
simophin (2009/10/11)
嗯，去试一下。IE6真不是一个东西。
hjl580 (2010/03/27)
#fixed{position:absolute;right:17px;}
17px是根据滚动条的宽度来设的？
joel (2010/03/28)
@hjl580:我想是的,这应该是个折中尺寸.另外,现在发现这种方式的ie6 fixed并不完美,这样做会导致页面中的所以position元素都fixed,使用得做考量.
疾风 (2010/05/29)
没弄成功 ⊙﹏⊙b汗~
joel (2010/06/09)
@疾风:让ie6去死吧
popo (2010/06/09)
这种方式只适合页面上没有其他postion:absolute和postion:relative的DOM元素
jimboyeah@gmail.com (2010/08/11)
IET弄错了，正解：
。。。。。。。。。。。。。。。。。
Jimbo (2010/08/11)
修正：
Internet Explorer 6 is!
ijse (2010/08/25)
把滚动条整没了？这点不完美哎。。
Destiny (2010/09/16)
@joel:是这样的，这个可以解决么？
joel (2010/09/17)
@Destiny:这个我后来就没有研究了,我现在想的就是优雅降级,随它ie6去吧.
Destiny (2010/09/17)
@joel:用expression可以做，就是麻烦点
joel (2010/09/20)
@Destiny:expression会有性能问题,不推荐.
php community (2010/12/20)
谢谢楼主了。找了很久。。。
lin04com (2011/09/10)
谢谢啊， 真是一篇好文章啊。
“fixed元素的绝对位置是相对于HTML元素,滚动条是body元素的”了解了。