2009.02 27

IE6 position:fixed bug (固定窗口方法)

标签: , , ,
Featured, 资源共享

今天herb同学在twitter上问到，如何利用CSS使搜索条固定显示于窗口的某个位置。好像之前也碰过这个问题，不过，当时并没有解决，用JS有现成的方法，不过，这次要求的就是不用JS。然后，开始写代码，测试，最终，IE6下依然有问题。position:fixed;没有正常显示。

ie6 position:fixed bug

正确的代码：预览/Demo | ie6_position_fixed_bug.txt(源代码)

在别的文章中看到，可以用position:absolute;来解决IE6的问题，不过，添加position:absolute;之后，依然没有成功。当然，最终，还是用position:absolute;来解决。只是，不一定能成功。因为，有一句非常重要的话需要理解。

fixed元素的绝对位置是相对于HTML元素来说，滚动条是body元素的。(via，刚才竟然没找到来源，囧。)

只有记住了这句话，才知为什么position:absolute;很多地方都给出了结果，但当时并未能解决。因为html被我设置position:relative。是上面这一句启发了我，最终才能够解决这个问题。我们拉动滚动条的时候，内容都会随着窗口滚动；这时滚动的是body。如果让绝对定位的父级元素定为body，刚我们需要固定的某个模块将会固定在网页的某个位置，而不是固定在窗口的某个位置（貌似在firefox中，html与body之间的介限并不明确?）。

我们需要做的是，让body保持其原有高度，让html只有一个窗口那么高。代码我们可以这样写：

html{overflow:hidden;} // 重要！
body{height:100%;overflow:auto;}

这时，html将只有一个窗口那么高，超过的，直接hide。而body会随高度自动变化。这时，我们可以利用绝对定位来定位我们想要固定在窗口某个位置的模块。假设我们要固定的内容在右上角，代码可以这样写：

html{overflow:hidden;}
body{height:100%;overflow:auto;}
#rightform form{position:absolute;right:30px;top50px;}

这样，窗口就固定在右上角了。而其他浏览器，我们可以用position:fixed;来解决固定的问题。其他浏览器完整的代码如下：

#rightform {text-align:center;padding:50px;font:14px/22px Georgia, "Times New Roman", Times, serif;height:1200px;background:#ffc;}
#rightform h1 {font-family:arial;background:#e8edef;height:300px;line-height:300px;margin-bottom:200px;}
#rightform p {line-height:1.5em;background:#ffdfff;padding:90px 0;}
#rightform form {background-color:#ddd;padding:10px 20px;border:1px solid #aaa;position:fixed;right:30px;top:120px;}

完整代码请看上面链接提供的txt文件。问题的原理就是这么简单。不知道，你能理解不?

收藏+分享: Del.icio.us / 百度搜藏 / QQ书签 / Google书签 / 更多 »
首页 » Featured, 资源共享 »

39

  1. 2009.02.27 10:39 pm
    ZH CEXO(visit): [回复]

    我的网站中右下角的导航也用的这种方法，原理差不多，但代码不一样，源自麦鸡的博客。

  2. 2009.02.27 10:40 pm
    ZH CEXO(visit): [回复]

    不过曾一度在IE6下面出现背景显示的问题，现在解决了一点点，但还是不完美

  3. 2009.02.27 11:30 pm
    leehow这个VIP(visit): [回复]

    都喜欢完美。

  4. 2009.02.27 11:33 pm
    sqybi(visit): [回复]

    twhirl没开…沙发没了…

  5. 2009.02.27 11:34 pm
    NetPuter(visit): [回复]

    我知道没有沙发了，先占位。

  6. 2009.02.27 11:37 pm
    NetPuter(visit): [回复]

    嗯嗯， position:fixed 很早之前被用到了我的博客，拿来当上下篇文章和评论的导航用。但是，就是 IE6 下没有办法悬停在那里，也就只好选个固定的位置放了。

    这个方法还不错的说，代码好长，大概看了下，收藏到鲜果。

  7. 2009.02.27 11:38 pm
    NetPuter(visit): [回复]

    话说这个技巧是骚鱼原创的？
    哈哈，翻译到英文就让那些老外长见识吧！

  8. 2009.02.28 12:07 am
    toydime(visit): [回复]

    啊，今日还算早吧，座位很靠前

  9. 2009.02.28 12:44 am
    Zoll(visit): [回复]

    上次这个问题问了肖大叔半天，IE6啊，也该淘汰了吧。。

  10. 2009.02.28 1:35 am
    囧囧有神的(visit): [回复]

    我最痛恨的莫过于 唉易溜 o(>﹏<)o

  11. 2009.02.28 2:15 am
    shaowei(visit): [回复]

    这两天用IE6，老是崩溃，刚刚抛弃IE6

  12. 2009.02.28 2:17 am
    shaowei(visit): [回复]

    收藏了，那在弄界面的时候IE6下正常，FF下不正常，有米有什么经验？

  13. 2009.02.28 9:10 am
    Herb(visit): [回复]

    哈哈，真不错

  14. 2009.02.28 11:30 am
    tokki(visit): [回复]

    你想干嘛啊=。= 你不会打算以后去搞前端开发末=。=

  15. 2009.02.28 12:22 pm
    sofish(visit): [回复]

    @shaowei: 有个<!–[if !IE]> <![endif]–> 非IE的可见。

  16. 2009.02.28 12:24 pm
    左岸读书(visit): [回复]

    这些想法很奇怪!细节的东西要高手来解决!

  17. 2009.02.28 3:03 pm
    不是(visit): [回复]

    真是佩服，还要慢慢看才能理解了

  18. 2009.02.28 3:05 pm
    54gh(visit): [回复]

    发现最近sofish的文章更新得比较少了，是不是很忙呢？

  19. 2009.02.28 5:06 pm
    会律博客(visit): [回复]

    这么长的文章只有收藏慢慢研究了！

  20. 2009.02.28 7:20 pm
    Lorz(visit): [回复]

    哈，我曾经幸运地解决了这个问题。不过，IE6……还在挣扎哪

  21. 2009.03.01 1:43 am
    Diarywu(visit): [回复]

    IE6 现在让我夜不能寐！

  22. 2009.03.01 1:45 am
    hoorace(visit): [回复]

    突然看到国外的网站收藏了你的网站
    http://cssmania.com/?start=1196

  23. 2009.03.01 10:41 am
    许三品(visit): [回复]

    IE6，一个永恒的话题！

  24. 2009.03.01 11:07 am
    eric(visit): [回复]

    css上手容易，要做好就难了

  25. 2009.03.01 4:58 pm
    wantfee(visit): [回复]

    没理解，还是要好好学。

  26. 2009.03.01 9:08 pm
    DigCars(visit): [回复]

    你好。请教一下。

    我最近修改主题的时候发现。

    有个盒子。在IE6下的宽度比IE7下多了10PX.

    这个盒子的样式表用了padding属性。width属性。border属性。别的就无关宽度了。

    请问怎么解决呢？？？

  27. 2009.03.02 9:38 am
    动画片(visit): [回复]

    我还是比较喜欢IE6的，楼主的这个文章写的很好啊！那在弄界面的时候IE6下正常，FF下不正常

  28. 2009.03.02 3:21 pm
    WordPress啦!(visit): [回复]

    不用IE6了，用的IE7，不过有时做页面的时候还真麻烦

  29. 2009.03.09 12:04 pm
    商标注册(visit): [回复]

    不错，记录一下。

  30. 2009.03.09 12:05 pm
    酒店家具(visit): [回复]

    学习了。

  31. 2009.03.14 9:40 pm
    z.Yleo77(visit): [回复]

    我想问下的是，给html设置postion relative 用在什么情况呢

  32. 2009.03.14 10:55 pm
    sofish(visit): [回复]

    @z.Yleo77 不需要设置。

  33. 2009.06.16 1:36 pm
    随影(visit): [回复]

    不错啊 我就是用第三种方法定位的 。。。。 ！！

  34. 2009.06.16 1:36 pm
    随影(visit): [回复]

    ie 6只要存在一天，我们就得考虑好多啊。。。！

  35. 2009.08.26 7:34 pm
    block(visit): [回复]

    这么做的缺点也很明显。
    ie里面所有absolute的元素都成fixed的了……

  36. 2009.09.15 11:50 pm
    YY语音(visit): [回复]

    好多内容啊，sofish全都看过，看你的博客做得那么漂亮

  37. 2009.12.09 1:41 am
    默瓜(visit): [回复]

    这个方法还是不错的, 我以前用过, 但是被我弃用了, 原因很简单, 没法再使用position:relative了, 我一直没有办法解决这个问题,呵呵,不知道博主可有高招.

  38. 2010.04.19 4:10 pm
    guest(visit): [回复]

    如果body里面有元素用了position:relative; 那么它的位置也会变成固定的……

  39. 2010.05.15 5:46 pm
    loo2k(visit): [回复]

    这个方法并不完美，就像LS说的“如果body里面有元素用了position:relative; 那么它的位置也会变成固定的……”

Additional comments powered by BackType