让IE6支持fixed的简单方法

By
WP札记

最近感觉很忙,又有点闲时间来更新博客。折腾着折腾着发现一个小问题:在主题制作或者修改中一些元素要设置为随页面滚动的效果,通常的做法是加上fixed属性,或者干脆用js实现这个功能。

不过对于懒得去后台更新js文件的同学来说,这不是个好办法,或者对于还未引入js的同学,这更不是好办法。但是不用的话在IE6下会无效,这个经典到目前访问量的半数以上的浏览器版本是直接无视fixed的(当然还有其他若干问题,所以希望更新或扔掉该浏览器)。

关于这个问题的解决办法,我之前的做法一直是用_position:absolute来暂时修订,当然这么做产生的效果和想象中的差距很大。最近发现一个方法来修正IE6的fixed效果,如下:

也是一个简单的hack,对于不想引入JS又迫切希望使用fixed属性的人来说,确实是个好办法。

More:

Q:有时候好像使用document.body.scrollTop来获取滚动条滚动的长度,结果滚动后得到的也是0,为什么改用document.documentElement.scrollTop就可以了?

A:可以查看一下源代码,如果没有

这一句那么可以用document.body.scrollTop,否则只能用document.documentElement.scrollTop

原因:在标准w3c下,document.body.scrollTop恒为0,需要用document.documentElement.scrollTop来代替;document.documentElement.scrollTop中documentElement 对应的是 html 标签;document.body.scrollTop 中 body 对应的是 body 标签。

0

Comments: 92

  1. 暂时还没有用过这个样式~

    2010年06月30日
    • @集趣 呵呵,说不定哪天就用到啦……

      2010年06月30日
  2. ie6就让它去吧

    2010年06月30日
    • @zwwooooo 部分人都这么想的,但是国内还是有困难……

      2010年06月30日
  3. 嘿嘿 这招很管用

    2010年06月30日
  4. 我还是乖乖的用我的IE8

    2010年06月30日
  5. 技术文啊..看到我一头雾水了..嘿嘿

    2010年06月30日
  6. 明天断网,赶来一踩。

    2010年06月30日
    • @Kada 莫非要开始闭关修炼?加油!

      2010年06月30日
    • @阿修 ,主要原因是,没有网费了,不过也好!

      2010年06月30日
    • @Kada 对,没有网络更能专心研究了

      2010年06月30日
  7. 我的主题在IE6下也是错位的。不会改、 :cry:

    2010年06月30日
    • @Junan 多练练就会改了。目前我的主题在IE6下还不算很杯具

      2010年06月30日
    • @阿修 有空要来请教一下博主先, :twisted:

      2010年06月30日
    • @Junan 呵呵,能解决一定鼎力相助~~

      2010年06月30日
  8. 添一块砖~~~~、

    :oops:

    2010年07月01日
  9. 无视ie6~~~

    2010年07月01日
    • @小羿 我也想无视,不过后来觉得稍微照顾一下它吧~岁数那么大了

      2010年07月01日
  10. 这次的皮肤有点味道,CSS3用的也不错啊,年轻真好!~

    2010年07月01日
    • @YoungCheon :twisted: 太棒啦,终于得到正面评价了,很高兴。你也很年轻呢~

      2010年07月01日
  11. 离开IE6已经很久了,看你的banner,居然是一个阿根廷球迷 哈哈!

    2010年07月01日
    • @苏扬 终于有人发现啦,我确实很喜欢阿根廷啊!~~

      2010年07月01日
  12. 阿修,貌似那天我说的滚动条就按照你这个方法解决袄?我在这里看见滚动条啦

    2010年07月02日
  13. 有没有复杂的方法让自行车支持 V12 涡轮增压发动机啊?

    2010年07月02日
  14. 现在IE6的人应该不多了。

    2010年07月02日
    • @混生 呵呵,去网吧看看就知道啦。

      2010年07月02日
  15. 啊悲剧的巴西,回家了哦

    2010年07月03日

夏影残雪进行回复 取消回复

电子邮件地址不会被公开。 必填项已用*标注

*

:razz: