zoukankan      html  css  js  c++  java
  • I6下实现FIXED

    <!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>无标题文档</title>
    <style>
    /*让position:fixed在IE6下可用! */ .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;
    } /* 上面的是除了IE6的主流浏览器通用的方法 */
    * html, * html body /* 修正IE6振动bug */ {
    background-image:url(about:blank);
    background-attachment:fixed;
    }
    * html .fixed-top /* IE6 头部固定 */ {
    position:absolute;
    bottom:auto;
    top:expression(eval(document.documentElement.scrollTop));
    }
    * html .fixed-right /* IE6 右侧固定 */ {
    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 /* IE6 底部固定 */ {
    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)));
    background:#f00;
    100%;
    }
    * html .fixed-left /* IE6 左侧固定 */ {
    position:absolute;
    right:auto;
    left:expression(eval(document.documentElement.scrollLeft));
    }
    </style>
    </head>

    <body>
    <div style="height:500px;background:#ccc;">
    </div>
    <div class="fixed-top">top</div>
    <div class="fixed-right">right</div>
    <div class="fixed-left">left</div>
    <div class="fixed-bottom">bottom</div>
    </body>
    </html>

  • 相关阅读:
    js简单工厂
    对象数组深浅拷贝
    分时函数的通用实现
    SQL技术内幕-4 row_number() over( partition by XX order by XX)的用法(区别于group by 和order by)
    SQL技术内幕-2
    SQL技术内幕-1
    js 阻止冒泡 兼容性方法
    C# 给数据库传入当前时间
    Ms sql server sql优化技巧
    SQl 字段中出现某一个词语的次数
  • 原文地址:https://www.cnblogs.com/webzhangnan/p/2524460.html
Copyright © 2011-2022 走看看