• IE6下fixed解决方案


    通过只对IE的expression属性来实现,即通过expression调用JS来实现position:fixed效果。

      目前网上有的比较多的是这种解决方案(纯CSS):
           html{overflow:hidden;}
           body{height:100%;overflow:auto;}
           #rightform form{position:absolute;right:30px;top50px;}
      这个方法有一个bug未解决:在IE6下会把所有position:absolute都变成"浮动"的元素;还有使用js方法滚动滚动条时会出现对象闪烁,如下方法结合了CSS和js的办法,解决了以上的问题。
    <!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=gb2312" />
    <title>IE6 fixed</title>
    <style type="text/css">
    *
    {
    margin: 0px;
    padding: 0px;
    }
    body {
    _background-image: url(about:blank);     /*用浏览器空白页面作为背景*/
    _background-attachment: fixed;             /* prevent screen flash in IE6 确保滚动条滚动时,元素不闪动*/
    }
    #topNav {
    980px;
    z-index: 100;                                                     /*设置浮动层次*/
    overflow: visible;
    position: fixed;
    top: 50px;                                                         /* 其他浏览器下定位,在这里可设置坐标*/
    _position: absolute;                                       /*IE6 用absolute模拟fixed*/
    _top: expression(documentElement.scrollTop + 50 + "px"); /*IE6 动态设置top位置*/
    /* documentElement.scrollTop 设置浮动元素始终在浏览器最顶,可以加一个数值达到排版效果 */
    background-color:#0000FF;
    height: 31px;
    }
    .show{
    position:absolute;
    top:500px;
    left:400px;
    border:#ff0000 1px solid;
    }
    </style>
    </head>
    <body>
    <div class="jd_menu" id="topNav">1111</div>
    <br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br />
    <div class="show">show</div>
    </body>
    </html>

      只实现了垂直方向的fixed。若要实现水平方向的fixed,设置_left:expression(documentElement.scrollLeft + "px");

      利用给<body>设置固定的背景,防止滚动条滚动时的闪动;如果<body>中要设置滚动的背景而产生冲突,可以把代码写在html选择器里面,如:
       html {
             _background-image: url(about:blank);
             _background-attachment: fixed;         /* prevent screen flash in IE6 */
       }
       body {
            background-image: url(1.jpg);
            background-attachment: scroll;
       }

  • 相关阅读:
    继承与多态——动手又动脑
    类与对象--动手又动脑
    Go语言接口
    GO语言结构体
    GO指针
    GO函数
    GO获取随机数
    GO基础
    Go语言的%d,%p,%v等占位符的使用
    GO语言常量和变量
  • 原文地址:https://www.cnblogs.com/ahjesus/p/1998651.html
Copyright © 2020-2023  润新知