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

来源：百度文库 编辑：神马文学网 时间：2024/05/01 02:34:27
前面的文章说了一点浮动图层的问题，但是还不够详细，在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)，这样做的好处是当窗口有全屏变小的时候，浮动窗口会跟着浮动，否则就会隐藏在右面了。
_xyz
猪头小队长 | 浮动图层问题解决终极版 猪头小队长 问题解决 暗香浮动话说威士忌(图) 基于CSS的DIV网页设计 - 通过浮动容器来固定层 - 三栏 基于CSS的DIV网页设计 - 通过浮动容器来固定层 - 两栏 政府公示牌逾两月无更新 民众画猪头提醒(图) 猪头哥哥的猪头哲学 衣情翩飞词情画意百图[终极收藏版] 图层 2 图层操作 什么是图层 添加图层样式 透析图层功能 photoshop图层 暗香浮动 清除浮动 暗香浮动 暗香浮动 暗香浮动 米迦勒资料[终极版] *佛像珍藏终极版* 东邪西毒终极版 *～去黑眼圈终极版～*