zoukankan      html  css  js  c++  java
  • 让IE6兼容position: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 type="text/css">
        body{
            width:100%;
            height:100%;
        }
        .right{
            width:100px;
            height:30px;
            position:fixed;
            top:100px;
            right:100px;
            pink;
         }
        .bottom{
            width:900px;
            height:30px;
            margin:0 auto;
            pink;
             position:fixed;
            left:auto;
            bottom:0;
        }
                                                                                                                
        /*========================IE6兼容position:fixed属性的第一种方法===========*/
        .center{
            width:300px;
            height:200px;
            pink;
             position:fixed;
            top:100px;
            left:100px;
            _position:absolute;
            _right:auto;
            _left:expression(eval(document.documentElement.scrollLeft+100));
        }
        .top{
            width:300px;
            height:100px;
            pink;
             position:fixed;
            top:0;
            right:400px;
            _position:absolute;
            _left:auto;
            _right:expression(eval(document.documentElement.scrollRight+400));
        }
        .bottom1{
            width:100px;
            height:50px;
            blue;
             position:fixed;
            right:50px;
            bottom:100px;
            _position:absolute;
            _left:auto;
            _bottom:expression(eval(document.documentElement.scrollBottom+100));
                                                                                                                    
        }
        .top1{
            width:200px;
            height:200px;
            red;
             position:fixed;
            top:20px;
            right:50px;
                                                                                                                    
        }
    </style>
    <!--==============IE6兼容position:fixed属性的第一种方法=============-->
    <!--[if IE 6]>
    <style type="text/css">
        html{overflow:hidden}
        body{height:100%;overflow:auto}
        .right{position:absolute;}
        .bottom{position:absolute;}
    </style>
    <![endif]-->
    </head>
    <body>
        <div class="right">右边</div>
        <div class="bottom">底部</div>
        <div class="bottom1">底部1</div>
        <div class="center">中间</div>
        <div class="top">顶部</div>
        <div class="top1">顶部1</div>
    </body>
    </html>

    注意:Internet Explorer的CSS表达式(expression)。你不可以直接使用该表达式,因为它可能会因为缓存而不更新。解决这一点的最简单的方式是使用eval包裹你的语句。
    html,* html body{background-image:url(about:blank);background-attachment:fixed}这个方法可以解决IE6振动BUG

    /*让position:fixed在除IE6以外的主流浏览器可用! */
    .fixed-top/* 头部固定 */{position:fixed;bottom:auto;top:0px;}
    .fixed-left/* 左侧固定 */{position:fixed;right:auto;left:0px;}
    .fixed-right/* 右侧固定 */{position:fixed;right:0px;left:auto;}
    /*一下的是让position:fixed在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)));}
    * html .fixed-left/* IE6 左侧固定 */{position:absolute;right:auto;left:expression(eval(document.documentElement.scrollLeft));}

    From: http://lflianglan.blog.51cto.com/7020643/1217420

  • 相关阅读:
    .NET XmlNavigator with Namespace
    编程要素
    【FOJ】1962 新击鼓传花游戏
    【POJ】1389 Area of Simple Polygons
    【POJ】2482 Stars in Your Window
    【HDU】3265 Posters
    【HDU】1199 Color the Ball
    【HDU】3642 Get The Treasury
    【HDU】4027 Can you answer these queries?
    【HDU】1542 Atlantis
  • 原文地址:https://www.cnblogs.com/imxiu/p/3383070.html
Copyright © 2011-2022 走看看