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

【字号: 日期:2024-07-29浏览:2作者:雯心
现在很多门户网站页面内容庞大,都会往下拉很长, 在以前我们想回顶部的时候要不断往上滚动鼠标的滚轮,直到滚到顶部为止,现在如果大家细心观察右下角是不是有一个点击回到顶部的按钮呢,对, 今天我要说的就这个按钮的布局,闲话不多说,直接上代码,在代码中我尽量的标注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' / titlefixed定位,解决IE6闪动问题/title style type='text/css' *html{ background-image:url(about:blank); background-attachment:fixed; }/*此代码解决IE6.0下不会出现闪动*/ .backgroundBox { border:1px solid orange; width:100px; height:2000px; } .fixedBox { border:1px solid red; width: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 /div div class='fixedBox'fixed box/div /body /html
相关文章: