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

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

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

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

var

scrollLeft,scrollTop;

if

(window.pageYOffset){

scrollTop

=

window.pageYOffset
}else

if

(document.documentElement

&&

document.documentElement.scrollTop){

scrollTop

=

document.documentElement.scrollTop;
}else

if

(document.body){

scrollTop

=

document.body.scrollTop;
}

if

(window.pageXOffset){

scrollLeft

=

window.pageXOffset
}else

if

(document.documentElement

&&

document.documentElement.scrollLeft){

scrollLeft

=

document.documentElement.scrollLeft;
}else

if

(document.body){

scrollLeft

=

document.body.scrollLeft;
}

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

var

theX,theY;
if

(window.innerWidth){

theX

=

‘window.innerWidth‘;
}else

if

(document.documentElement

&&

document.documentElement.clientWidth){

theX

=

‘document.documentElement.clientWidth‘;
}else

if

(document.body){

theX

=

‘document.body.clientWidth‘;
}
if

(window.innerHeight){

theY

=

‘window.innerHeight‘;
}else

if

(document.documentElement

&&

document.documentElement.clientHeight){

theY

=

‘document.documentElement.clientHeight‘;
}else

if

(document.body){

theY

=

‘document.body.clientHeight‘;
}

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

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

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

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

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

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