完美解决IE6不支持position:fixed的bug问题

废话不多说,先看一下下面这段代码:

<!DOCTYPE html>
< html >
< head >
< meta http-equiv = "Content-Type" content = "text/html; charset=utf-8" />
< title >IE6 position:fixed bug</ title >
< style >
*{padding:0;margin:0}
p{height:2000px}
#gs{border:1px solid #000;position:fixed;right:30px;top:120px}
</ style >
<!--[if IE 6]>
<style type="text/css">
html{overflow:hidden}
body{height:100%;overflow:auto}
#gs{position:absolute}
</style>
<![endif]-->
</ head >
< body >
< div id = "rightform" >
     < p >11111111111111111</ p >
     < input id = "gs" name = "gs" type = "text" value = ""  />
</ div >
</ body >
</ html >

以上这段代码在网上很常见,通过设置html{overflow:hidden}body{height:100%;overflow:auto}来实现ie6下position:fixed效果,但这种办法有个缺陷,那就是:这会使页面上原有的absolute、relation都变成fixed的效果,在这里我就不做demo了,如果有怀疑,可以自己去试验一下。

于是我找了下资料,发现可以通过一条Internet Explorer的CSS表达式(expression)来完美的实现ie6下position:fixed效果,css代码如下:

/* 除IE6浏览器的通用方法 */
.ie 6 fixedTL{ position : fixed ; left : 0 ; top : 0 }
.ie 6 fixedBR{ position : fixed ; right : 0 ; bottom : 0 }
 
/* IE6浏览器的特有方法 */
* html .ie 6 fixedTL{ position : absolute ; left :expression(eval(document.documentElement.scrollLeft)); top :expression(eval(document.documentElement.scrollTop))}
* html .ie 6 fixedBR{ position : absolute ; left :expression(eval(document.documentElement.scrollLeft+document.documentElement.clientWidth-this.offsetWidth)-(parseInt(this.currentStyle.marginLeft, 10 )|| 0 )-(parseInt(this.currentStyle.marginRight, 10 )|| 0 )); top :expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop, 10 )|| 0 )-(parseInt(this.currentStyle.marginBottom, 10 )|| 0 )))}
 
上面代码可以直接使用了,如果要设置元素悬浮边距,要分别为设置两次,比如我要让某个元素距顶部10个像素,距左部也是10个像素,那就要这样子写:
 
/* 除IE6浏览器的通用方法 */
.ie 6 fixedTL{ position : fixed ; left : 10px ; top : 10px }
 
/* IE6浏览器的特有方法 */
* html .ie 6 fixedTL{ position : absolute ; left :expression(eval(document.documentElement.scrollLeft+ 10 )); top :expression(eval(document.documentElement.scrollTop+ 10 ))}
 
这样一来,IE6下实现position:fixed的效果解决了,而且也不会影响到其他的absolute、relation,但还有一个问题,就是悬浮的元素会出现振动
 
IE有一个多步的渲染进程。当你滚动或调整你的浏览器大小的时候,它将重置所有内容并重画页面,这个时候它就会重新处理css表达式。这会引起一个丑陋的“振动”bug,在此处固定位置的元素需要调整以跟上你的(页面的)滚动,于是就会“跳动”。
解决此问题的技巧就是使用background-attachment:fixed为body或html元素添加一个background-image。这就会强制页面在重画之前先处理CSS。因为是在重画之前处理CSS,它也就会同样在重画之前首先处理你的CSS表达式。这将让你实现完美的平滑的固定位置元素!
 
然后我发现background-image无需一张真实的图片,设置成 about:blank就行了。
 
下面附上完整代码
 
/* 除IE6浏览器的通用方法 */
.ie 6 fixedTL{ position : fixed ; left : 0 ; top : 0 }
.ie 6 fixedBR{ position : fixed ; right : 0 ; bottom : 0 }
 
/* IE6浏览器的特有方法 */
/* 修正IE6振动bug */
* html,* html body{ background-image : url (about:blank); background-attachment : fixed }
* html .ie 6 fixedTL{ position : absolute ; left :expression(eval(document.documentElement.scrollLeft)); top :expression(eval(document.documentElement.scrollTop))}
* html .ie 6 fixedBR{ position : absolute ; left :expression(eval(document.documentElement.scrollLeft+document.documentElement.clientWidth-this.offsetWidth)-(parseInt(this.currentStyle.marginLeft, 10 )|| 0 )-(parseInt(this.currentStyle.marginRight, 10 )|| 0 )); top :expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop, 10 )|| 0 )-(parseInt(this.currentStyle.marginBottom, 10 )|| 0 )))}
 
也可以写成
#hhdx_mes{bottom:0;position:fixed;_position:absolute;z-index:9999;bottom:32px;_top:expression(eval(document.compatMode&&document.compatMode=='CSS1Compat')?documentElement.scrollTop+(documentElement.clientHeight-this.clientHeight-32)-0: document.body.scrollTop+(document.body.clientHeight-this.clientHeight)-0);z-index:1;right:0px;}
 
其中:
 document.documentElement.scrollTop:要获取当前页面的滚动纵坐标位置。要用document.documentElement.scrollTop.而不是document.body.srollTop
因为documentElement对应的是html标签,而body对应的是body标签;

网页可见区域宽: document.body.clientWidth;
网页可见区域高: document.body.clientHeight;
网页可见区域宽: document.body.offsetWidth   (包括边线的宽);
网页可见区域高: document.body.offsetHeight  (包括边线的宽);
网页正文全文宽: document.body.scrollWidth;
网页正文全文高: document.body.scrollHeight;
网页被卷去的高: document.body.scrollTop;
网页被卷去的左: document.body.scrollLeft;
网页正文部分上: window.screenTop;
网页正文部分左: window.screenLeft;
屏幕分辨率的高: window.screen.height;
屏幕分辨率的宽: window.screen.width;
屏幕可用工作区高度: window.screen.availHeight;

屏幕可用工作区宽度:window.screen.availWidth;

 

scrollHeight: 获取对象的滚动高度。  
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollWidth:获取对象的滚动宽度
offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置  
event.clientX 相对文档的水平座标
event.clientY 相对文档的垂直座标

event.offsetX 相对容器的水平坐标
event.offsetY 相对容器的垂直坐标  
document .documentElement.scrollTop 垂直方向滚动的值
event.clientX+document .documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量

在标准w3c下,document .body.scrollTop恒为0,需要用document .documentElement.scrollTop来代替;
如果你想定位鼠标相对于页面的绝对位置时,你会发现google里面1000篇文章里面有999.99篇会让你使用event.clientX+document .body.scrollLeft,event.clientY+document .body.scrollTop,如果你发现你的鼠标定位偏离了你的想象,请不要奇怪,这是再正常不过的事情。
ie5.5之后已经不支持document .body.scrollX对象了。
所以在编程的时候,请加上这样的判断

if (document.body && document.body.scrollTop && document.body.scrollLeft)
{
   top=document .body.scrollTop;
   left=document .body.scrollleft;    
}
if (document.documentElement && document.documentElement.scrollTop && document.documentElement.scrollLeft)
{
   top=document.documentElement.scrollTop;
   left=document.documentElement.scrollLeft;
}

2、clientHeight

clientHeight:大家对clientHeight都没有什么异议,都认为是内容可视区域的高度,也就是说页面浏览器中可以看到内容的这个区域的高度,一般是最后一个工具条以下到状态栏以上的这个区域,与页面内容无关

 

转载于:https://www.cnblogs.com/chenguiya/archive/2013/04/19/3030778.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值