• css:fixed定位兼容不同系列不同版本的浏览器包括IE6.0


     
    :以前我们想回顶部的时候要不断往上滚动鼠标的滚轮,直到滚到顶部为止;现在可以看到右下角有一个点击回到顶部的按钮;今天我要说的就这个按钮的布局,感兴趣的你可千万不要错过,希望本例知识可以帮助到你
    现在很多门户网站页面内容庞大,都会往下拉很长, 在以前我们想回顶部的时候要不断往上滚动鼠标的滚轮,直到滚到顶部为止,现在如果大家细心观察右下角是不是有一个点击回到顶部的按钮呢,对, 今天我要说的就这个按钮的布局,闲话不多说,直接上代码,在代码中我尽量的标注css样式,以方便大家阅读;

    复制代码
    代码如下:

    <!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>fixed定位,解决IE6闪动问题</title>
    <style type="text/css">
    *html{
    background-image:url(about:blank);
    background-attachment:fixed;
    }/*此代码解决IE6.0下不会出现闪动*/
    .backgroundBox {
    border:1px solid orange;
    100px;
    height:2000px;
    }
    .fixedBox {
    border:1px solid red;
    100px;
    height:100px;
    position:fixed; /*支持实现w3c标准的浏览器*/
    _position:absolute; /*单独针对IE6*/
    left:200px; /*距离顶部200px*/
    top:200px; /*距离右边200px*/
    _top:expression(eval(document.documentElement.scrollTop+200)); /*+200是IE6.0下面距离浏览器窗口顶部的位置*/
    /*IE6.0下面距离底部位置为0px*/
    /*_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));*/
    }
    </style>
    </head>
    <body>
    <div class="backgroundBox"></div>
    <div class="fixedBox">fixed box</div>
    </body>
    </html>
  • 相关阅读:
    Office2007界面风格的绿色软件针式个人知识库管理系统[V3.5]
    Mentor工具简介
    Xilinx网站资源导读
    FPGA时钟问题的探讨汇总
    FPGA中竞争冒险问题的研究
    一些IC前端设计工具
    SPI协议简介
    USB接口定义
    TTL与CMOS电平的区别
    Synopsys工具简介
  • 原文地址:https://www.cnblogs.com/aimyfly/p/2936189.html
Copyright © 2020-2023  润新知