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;
       }

  • 相关阅读:
    Python 学习笔记 11.模块(Module)
    Python 学习笔记 8.引用(Reference)
    Python 学习笔记 9.函数(Function)
    Python 学习笔记 6.List和Tuple
    Python 学习笔记 4.if 表达式
    Python 学习笔记 2.自省
    Python 学习笔记 3.简单类型
    Python 学习笔记 7.Dictionary
    Python 学习笔记 5.对象驻留
    Python 学习笔记 10.类(Class)
  • 原文地址:https://www.cnblogs.com/ahjesus/p/1998651.html
Copyright © 2011-2022 走看看