猪头小队长 | 浮动图层问题解决终极版

前面的文章说了一点浮动图层的问题，但是还不够详细，在FireFox，IE两种浏览器下，在有DOCTYPE定义和无DOCTYPE定义两种情况下，浮动图层所表现出来的问题都是不一样的，甚者今天发现在IE和FireFox都正常的时候，在Maxthon下居然出现了问题。

下面的解决办法应该没有什么问题了。

1. 取scrollLeft、scrollTop的时候这样取：

varscrollLeft,scrollTop;

if(window.pageYOffset){
scrollTop=window.pageYOffset
}elseif(document.documentElement&&document.documentElement.scrollTop){
scrollTop=document.documentElement.scrollTop;
}elseif(document.body){
scrollTop=document.body.scrollTop;
}

if(window.pageXOffset){
scrollLeft=window.pageXOffset
}elseif(document.documentElement&&document.documentElement.scrollLeft){
scrollLeft=document.documentElement.scrollLeft;
}elseif(document.body){
scrollLeft=document.body.scrollLeft;
}

2.取clientWidth、clientHeight的时候这样取：(下面用theX、theY代替，尤其是想在页面的右下端显示浮动窗口的时候会用到这两个参数)

vartheX,theY;
if(window.innerWidth){
theX=‘window.innerWidth‘;
}elseif(document.documentElement&&document.documentElement.clientWidth){
theX=‘document.documentElement.clientWidth‘;
}elseif(document.body){
theX=‘document.body.clientWidth‘;
}
if(window.innerHeight){
theY=‘window.innerHeight‘;
}elseif(document.documentElement&&document.documentElement.clientHeight){
theY=‘document.documentElement.clientHeight‘;
}elseif(document.body){
theY=‘document.body.clientHeight‘;
}

3.在开始的时候，要将准备浮动的图层弄成隐藏的，这样会避免向将图层在右端浮动，在页面加载的时候图层由左至右的飞过去。

4.设置图层可以显示的时候，下面两个都要用，不然图层在某浏览器下会不显示：

object.style.display = ‘block‘;
object.style.visibility=‘visible‘;

5.在给图层设浮动位置的时候，用表达式而不用具体的数值，例如设置

theX = ‘document.body.clientHeight-20‘;

然后在执行的时候求值eval(theX)，这样做的好处是当窗口有全屏变小的时候，浮动窗口会跟着浮动，否则就会隐藏在右面了。