fixed定位,兼容不同系列不同版本的浏览器(IE6.0)
2013-05-21 19:53
387 查看
现在很多门户网站页面内容庞大,都会往下拉很长, 在以前我们想回顶部的时候要不断往上滚动鼠标的滚轮,直到滚到顶部为止,现在如果大家细心观察右下角是不是有一个点击回到顶部的按钮呢,对, 今天我要说的就这个按钮的布局,闲话不多说,直接上代码,在代码中我尽量的标注css样式,以方便大家阅读;
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 5 <title>fixed定位,解决IE6闪动问题</title> 6 <style type="text/css"> 7 8 *html{ 9 background-image:url(about:blank); 10 background-attachment:fixed; 11 }/*此代码解决IE6.0下不会出现闪动*/ 12 13 .backgroundBox { 14 border:1px solid orange; 15 width:100px; 16 height:2000px; 17 } 18 19 .fixedBox { 20 border:1px solid red; 21 width:100px; 22 height:100px; 23 position:fixed; /*支持实现w3c标准的浏览器*/ 24 _position:absolute; /*单独针对IE6*/ 25 left:200px; /*距离顶部200px*/ 26 top:200px; /*距离右边200px*/ 27 _top:expression(eval(document.documentElement.scrollTop+200)); /*+200是IE6.0下面距离浏览器窗口顶部的位置*/ 28 /*IE6.0下面距离底部位置为0px*/ 29 /*_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));*/ 30 } 31 </style> 32 </head> 33 34 35 <body> 36 <div class="backgroundBox"></div> 37 <div class="fixedBox">fixed box</div> 38 </body> 39 40 </html>
相关文章推荐
- css:fixed定位兼容不同系列不同版本的浏览器包括IE6.0
- fixed定位,兼容不同系列不同版本的浏览器(IE6.0)
- css:fixed定位兼容不同系列不同版本的浏览器包括IE6.0
- 使用absolute模拟fixed定位,兼容ie6,及ie7 8 9和火狐谷歌等浏览器
- 兼容不同版本浏览器及版本号来创建XMLHttpRequest对象
- 绝对定位的div的居中方法,下面的写法兼容IE系列浏览器和火狐浏览器。
- 触摸事件--兼容不同浏览器及不同IE版本
- 绝对定位的div的居中方法,下面的写法兼容IE系列浏览器和火狐浏览器。
- 完美解决IE6浏览器下不兼容position:fixed固定定位
- XMLHttp兼容多种不同版本的浏览器
- 监听浏览器使用不同版本js并且处理ie兼容getElementByClassName
- html5兼容低版本浏览器
- 让你的.NET程序兼容不同版本的Dll文件
- 兼容各版本浏览器的关闭事件window.close
- 跨浏览器的CSS固定定位{position:fixed}
- 能兼容不同浏览器的新条码字体
- php面向对象(OOP)—不同php版本构造方法的继承和兼容
- IE低版本浏览器兼容CSS3的属性的工具htc
- 解决(remote)Selenium与firefox浏览器版本不兼容问题
- css属性对不同浏览器的兼容