zoukankan      html  css  js  c++  java
  • 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;
       }

  • 相关阅读:
    查找符号链接的目标
    升级到VS2013.Update.4的问题
    (转载)FT232RL通信中断问题解决办法总结
    WinForms中的Label的AutoSize属性
    VS2010中的查找和替换中正则的使用
    为什么SqlTransaction.Rollback会抛出SqlException(11,-2)(即SQL超时异常)
    腾讯内推 社会招聘 自助操作内推
    腾讯内推流程 社会招聘 腾讯面试流程
    golang sort包的使用(一)
    golang 结构体中空数组被序列化成null解决方法
  • 原文地址:https://www.cnblogs.com/ahjesus/p/1998651.html
Copyright © 2011-2022 走看看