• 欢迎加入本站交流QQ群:223991312
  •    2年前 (2015-04-26)  前端开发 |   10 条评论  612 
    文章评分 1 次,平均分 5.0

    在网页设计中,时常要用到把某个元素(如导航栏)始终定位在屏幕上,即使滚动浏览器窗口也不会发生变化。一般我们会使用position:fixed来进行绝对固定,但IE6并不支持position:fixed属性,所以必须对IE6进行”特殊照顾”。

    我们想要把元素定位在浏览器的底部

    HTML代码

    <div class="box">
        </div>
        <div class="content">
    </div>

    CSS代码

    .box{
        background:#69C;
        height:60px;
        width:500px;
        position:fixed;
        left:0;
        bottom:0;
    }
    .content{
        height:5000px;/*使内容足够长,方便查看滚屏效果*/
        background:#9CF;
    }

    此刻在火狐中已经正常了,接下来为IE6增加一些针对性的代码,在box中加入

    _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)));

    现在IE6中已经实现固定定位的效果了,但是移动滚动条时,会出现闪屏,所以还需要在box中加入

    *html{
        background-image:url(about:blank);
        background-attachment:fixed;
    }

    分析

    定位的位置left和right可以用绝对定位的方法解决,所以上面加了专门针对IE6的绝对定位

    _position:absolute;而 top 跟 bottom 就需要用上面的表达式来实现。

    如果想要把box元素定位在浏览器的顶部,只需要修改_top的值,代码如下

    _top:expression(eval(document.documentElement.scrollTop));

    如果希望box元素不是位于最顶部,也不是位于最底部,你可以使用 _margin-top:30px;或_margin-bottom:30px;修改其中的数值来控制元素的位置。

    IE6不支持position:fixed;的问题已经彻底解决了,想要更深入的理解,就多动动手吧!

    转载地址  http://www.sjyhome.com/css/let-ie6-support-position-fixed.html

     

    除特别注明外,本站所有文章均为前端迷原创,转载请注明出处来自http://www.yxxme.com/1091.html

    关于
    本站汇集前端开发教程与技巧、交互设计、插件、网页特效、PSD素材、模板源码、网页设计等素材,相关内容均保证绿色安全、优质实用,欢迎大家多多交流,期待共同学习进步。
    切换注册

    登录

    忘记密码 ?

    您也可以使用第三方帐号快捷登录

    切换登录

    注册

    扫一扫二维码分享