Home > xhtml+css > 在ie6下实现position-fixed的效果

在ie6下实现position-fixed的效果

5月 27th, 2009

[参与测试的浏览器:IE6 / IE7 / IE8 / FF3 / OP9.6 / SF3 / Chrome2 ]
[操作系统:Windows]

我喜欢position:fixed,它很酷。
但ie6总不支持它,所以用其他的属性来模拟(这个模拟在主流浏览器中都兼容,所以其他浏览器也不需要分开写position:fixed了)。
看效果先:

提示:你可以先修改部分代码再运行。

这是基于这种方法做的对联效果:

提示:你可以先修改部分代码再运行。

原理如下:

提示:你可以先修改部分代码再运行。

把框框的高宽都扩大到100%,然后将雷打不动的文字定个位就行了。

Chomo xhtml+css ,

  1. 5月 30th, 2009 at 00:29 | #1

    @s.w
    还有办法,就是利用ie6的bug,直接用position:relative来替代position:fixed,有人使用,但里面的其他元素就无法position:relative了,不是个好办法。
    那个确实是spam,我在其他的博客上也见到过。

    @bigCat
    谢谢,已经装上来了 - -! 刚才检查发现已经有这个插件,但是我不知道什么时候把akismet禁用了。我才初玩wp,请多多指教。^-^

  2. 6月 4th, 2009 at 11:12 | #2

    从某一方面说,这个的确解决了 fixed 问题,

    可是你要知道,当你把body,html高度限制后, 你就会发现N多问题。

    比如:我要用脚本获取body的高度,然后做一个遮罩层,此时却不能获取真实的高度。

    在实际项目中,很多时候需要用脚本对body和html的高度控制,经常需要获取body的高度,所以这个方法会引发的问题可想而知。

    个人的一点见解。

  3. chirsjie
    6月 4th, 2009 at 11:42 | #3

    不错,效果很不错,感觉在网站后台用这个效果不错.前端的话,貌似很少看到这样的效果

  4. 9月 26th, 2009 at 11:26 | #4

    个人觉得这个兼容IE6时更多还是用JS来实现的。
    用这个方法是可以达到fixed的效果但有时会出来些问题,就象纯CSS的两列等高一样,小问题很多。。。还不如用JS实现好。

  5. 9月 27th, 2009 at 02:13 | #5

    @enjoyd
    谁用谁知道~“

  6. 12月 21st, 2009 at 11:00 | #6

    如果容器是自适应宽度 例如左右各空15px,如何实现呢。

  7. 12月 25th, 2009 at 09:35 | #7

    .parent { width:100%;}
    .child { margin:0 32px 0 15px;}

  1. No trackbacks yet.