fixed定位,兼容不同系列不同版本的浏览器(IE6.0)
2013-02-21 10:49
330 查看
现在很多门户网站页面内容庞大,都会往下拉很长, 在以前我们想回顶部的时候要不断往上滚动鼠标的滚轮,直到滚到顶部为止,现在如果大家细心观察右下角是不是有一个点击回到顶部的按钮呢,对, 今天我要说的就这个按钮的布局,闲话不多说,直接上代码,在代码中我尽量的标注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; 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 class="backgroundBox"></div> <div class="fixedBox">fixed box</div> </body> </html>
相关文章推荐
- fixed定位,兼容不同系列不同版本的浏览器(IE6.0)
- css:fixed定位兼容不同系列不同版本的浏览器包括IE6.0
- css:fixed定位兼容不同系列不同版本的浏览器包括IE6.0
- 绝对定位的div的居中方法,下面的写法兼容IE系列浏览器和火狐浏览器。
- 监听浏览器使用不同版本js并且处理ie兼容getElementByClassName
- XMLHttp兼容多种不同版本的浏览器
- 使用absolute模拟fixed定位,兼容ie6,及ie7 8 9和火狐谷歌等浏览器
- 触摸事件--兼容不同浏览器及不同IE版本
- 完美解决IE6浏览器下不兼容position:fixed固定定位
- 兼容不同版本浏览器及版本号来创建XMLHttpRequest对象
- 绝对定位的div的居中方法,下面的写法兼容IE系列浏览器和火狐浏览器。
- 老版本浏览器兼容,css2学习
- 区别 ff, ie7.0, ie6.0不同浏览器,CSS hack写法
- 兼容各个浏览器版本的事件监听器工具
- bootstrap模板为使IE6、7、8版本(IE9以下版本)浏览器兼容html5和css3
- CSS3不同浏览器兼容问题,-moz,-webkit,-ms,-o所代表的不同意思
- div+CSS浏览器兼容问题整理(IE6.0、IE7.0 ,ie8 , FireFox..
- android圆角View实现及不同版本这间的兼容
- IE浏览器JSON不兼容问题及浏览器版本问题解决
- oj项目遇到的第一个问题----------不同浏览器下兼容的问题