zoukankan      html  css  js  c++  java
  • CSS Position Fixed for IE6

    逛mootools核心成员Thomas Aylott的博客看到,不过有点标题党了,实际效果并没有那么灵光,只是定义四个类,分别用来固定视口的上下左右。很遗憾,它无法解决与top,bottom,left,right并用的问题(见例子)。它利用到IE8已经废弃的expression来计算页面的大小,从而固定我们想固定的元素。里面用到一技巧,就是给html或body元素添加一张背景图片,并设置background-attachment:fixed,用于强制在页面重绘之前执行CSS,也就是执行它里面的expression。另,我们也不需要一张真的图片,我们给它一个about:blank命令就可以,就像平时对付链接一样,仅仅就是想要一个hover效果非得塞给它一个href。

    .fixed-top    {position:fixed;bottom:auto;top:0px;}
    .fixed-bottom {position:fixed;bottom:0px;top:auto;}
    .fixed-left   {position:fixed;right:auto;left:0px;}
    .fixed-right  {position:fixed;right:0px;left:auto;}
    
    * html,* html body   {background-image:url(about:blank);background-attachment:fixed;}
    * html .fixed-top    {position:absolute;bottom:auto;top:expression(eval(document.documentElement.scrollTop));}
    * html .fixed-right  {position:absolute;right:auto;left:expression(eval(document.documentElement.scrollLeft+document.documentElement.clientWidth-this.offsetWidth-(parseInt(this.currentStyle.marginLeft,10)||0)-(parseInt(this.currentStyle.marginRight,10)||0)));}
    * html .fixed-bottom {position:absolute;bottom:auto;top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));}
    * html .fixed-left   {position:absolute;right:auto;left:expression(eval(document.documentElement.scrollLeft));}
    

    PS:要真正解决IE6的这个bug,就需要用到Dean Edwards大神的IE7.js

  • 相关阅读:
    网络编程
    面向对象总结
    面象对象编程(选课系统)
    类的魔法方法和部分单例模式
    简易3D开发,ThingJS之大道至简
    ThingJS参与3D众创,一起建设“实体中国”!
    ThingJS:轻松让空间“立起来”,展示你的3D创造力
    一个产品的状态不好?ThingJS来找茬
    ThingJS提供有地理位置的信息弹窗示例
    一次灵感盛宴,ThingJS推出场景Market
  • 原文地址:https://www.cnblogs.com/rubylouvre/p/1603113.html
Copyright © 2011-2022 走看看