当前位置:首页> 正文
css:fixed定位兼容不同系列不同版本的浏览器包括IE6.0
现在很多门户网站页面内容庞大,都会往下拉很长, 在以前我们想回顶部的时候要不断往上滚动鼠标的滚轮,直到滚到顶部为止,现在如果大家细心观察右下角是不是有一个点击回到顶部的按钮呢,对, 今天我要说的就这个按钮的布局,闲话不多说,直接上代码,在代码中我尽量的标注css样式,以方便大家阅读;
复制代码代码如下:
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://imgbuyun.weixiu-service.com/up79/202210/351cgfcxnjj.dtd"
html xmlns="http://imgbuyun.weixiu-service.com/up79/202210/du045mgeoel"
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 class="backgroundBox"/div
div class="fixedBox"fixed box/div
/body
/html
复制代码代码如下:
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://imgbuyun.weixiu-service.com/up79/202210/351cgfcxnjj.dtd"
html xmlns="http://imgbuyun.weixiu-service.com/up79/202210/du045mgeoel"
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 class="backgroundBox"/div
div class="fixedBox"fixed box/div
/body
/html
展开全文阅读
相关内容
-
怎么用ie浏览器打开网页(IE浏览器常用快捷键)
怎么用ie浏览器打开网页(IE浏览器常用快捷键),标签,快捷键,标...
-
ie11兼容模式在哪?IE11兼容模式怎么设置
ie11兼容模式在哪?IE11兼容模式怎么设置,兼容模式,设置,网站,...
-
IE浏览器单独写CSS样式的几种方法
IE浏览器单独写CSS样式的几种方法,浏览器,条件,维护,复制,注...
-
IE8采用多兼容模式正常显示网页
IE8采用多兼容模式正常显示网页,网页,兼容模式,浏览器,模式,...
-
教你通过命令行完美完全的卸载IE浏览器(IE9、IE
教你通过命令行完美完全的卸载IE浏览器(IE9、IE10、IE11),卸...
-
ie10 css hack 条件注释等兼容方式整理
ie10 css hack 条件注释等兼容方式整理,注释,条件,支持,方法,...
-
div+css学习笔记(IE与fox好多不兼容的问题)
div+css学习笔记(IE与fox好多不兼容的问题),不兼容,滤镜,属性...
-
浅析IE10兼容性问题(frameset的cols属性)
浅析IE10兼容性问题(frameset的cols属性),属性,兼容性问题,浏...
-
把Windows 系统中的IE8浏览器降为IE6的方法
把Windows 系统中的IE8浏览器降为IE6的方法,方法,版本号,版本...
-
如何彻底优化IE浏览器 六种设置方法轻松优化你
如何彻底优化IE浏览器 六种设置方法轻松优化你的IE浏览器,方...
-
WIN7操作系统下做好IE6,IE7的兼容性测试
WIN7操作系统下做好IE6,IE7的兼容性测试,兼容性测试,版本,安...
-
重装windowsXP系统中IE浏览器2步搞定
重装windowsXP系统中IE浏览器2步搞定,浏览器,用户,注册表,步...
-
Ubuntu 上安装IE浏览器的方法
Ubuntu 上安装IE浏览器的方法,方法,安装,浏览器,下载,终端,更...
-
padding ie 不兼容问题
padding ie 不兼容问题,不兼容,使用说明,识别,情况,都不,这种...
-
修改IE浏览器参数 增强上网安全性
修改IE浏览器参数 增强上网安全性,浏览器,参数,修改,上网,安...