获取页面高宽度

获取页面高宽度

标准模式下(使用*{margin:0px;padding:0px},ie,opera,webkit body默认有margin,8px,ff没有):

body类似于block,宽度auto,高度auto,自伸缩

貌似ie6,7一直有垂直滚动条(标准模式下是html的,怪异模式下是body的),opera一直有垂直和水平滚动条(是html的),
hidden滚动条的时候还会出现一些现象...(没有测试)

html为实际视口的高宽:
没出滚动条的时候:

document.body值基本正常,clientWidth和documentElement相同,height为0
opera10:
document.documentElement.clientWidth,document.documentElement.clientHeight,取值正常
document.documentElement.scrollwidth为视口宽度,等于clientWidth
document.documentElement.scrollHeight==2, ???

ie6,7:
document.documentElement.clientWidth,document.documentElement.clientHeight,取值正常
document.documentElement.scrollwidth==2  ???
document.documentElement.scrollHeight==20  ???

webkit(safari4,chrome2):
document.body.scrollHeight可以取到高度,等于document.documentElement.clientHeight
document.documentElement.scrollHeight==0   ???

ff3:
貌似完美

出滚动条的时候(body内放一个很大的div):
ie6:
document.body.clientWidth,document.body.clientHeight,document.body.scrollWidth,document.body.scrollHeight
和document.documentElement.scrollwidth  document.documentElement.scrollHeight值一样
document.documentElement.clientWidth  document.documentElement.clientHeight值为视口的宽高
ie7:
和ie6类似,唯一不同之处是document.body.clientWidth为视口宽度

FF3:
document.documentElement.scrollwidth  document.documentElement.scrollHeight正常
document.documentElement.clientWidth  document.documentElement.clientHeight正常,值为视口的宽高
document.body.clientWidth为视口宽度,document.body.clientHeight为document.documentElement.scrollHeight高度
webkit:

和ie7类似
opera:
和ie7类似,不同之处在于document.body.scrollWidth==document.body.clientWidth;

怪异模式下:
没滚动条的时候:
ie6:  document.body.clientWidth差document.documentElement.scrollwidth 20像素,
document.body.clientHeight差document.documentElement.scrollHeight 2像素
document.body.scrollWidth,document.body.scrollHeight分别为2和20   ???

document.documentElement.clientWidth  document.documentElement.clientHeight为0,0

ie7: 类似IE6

ff3: document.body.clientWidth==document.body.scrollwidth
document.body.clientHeight==document.body.scrollHeight 取值正常

document.documentElement.scrollWidth==document.body.clientWidth
document.documentElement.clientHeight==document.documentElement.scrollHeight==0

opera10:
类似ff3

webkit:
document.body.clientWidth==document.body.scrollwidth ==document.documentElement.clientWidth==document.documentElement.scrollWidth
document.body.clientHeight==document.body.scrollHeight==document.documentElement.clientHeight==document.documentElement.scrollHeight

有滚动条情况下(body内放一个很大的div):
ie6:
和没滚动条类似,document.body.scrollWidth,document.body.scrollHeight取到带滚动的高宽
ie7:
和IE6类似
ff3:
document.body值正常
document.documentElement.clientWidth==document.documentElement.scrollWidth==document.body.clientWidth
document.documentElement.clientHeight==document.documentElement.scrollHeight==document.body.scrollHeight
opera10:
类似于ff3
webkit:
document.body值正常
document.documentElement值正常(除过document.documentElement.clientHeight==document.documentElement.scrollHeight==document.body.scrollHeight)




把body或html的滚动条去掉以后还会有很大差别,太烦了就没测试...



网名: 天堂左我往右

评论

5 楼 lixinlixin2008 2009-08-23  

嗯,是的,看看框架的源代码非常有好处...他们已经把所有情况基本都考虑进去了...

4 楼 blueion 2009-08-21  

不如去看看dojo.marginBox和dojo.contentBox里面的代码了

3 楼 phenom 2009-06-27  

都是IE惹的祸,和操作系统绑一起,写的时候要考虑多种,不像OP,FF,通常会用新的.

2 楼 lixinlixin2008 2009-06-26  

是哈是哈,非常烦哈

1 楼 zhouyrt 2009-06-26  

跨浏览器下的高度和宽度，总结的很仔细。
跨浏览器开发时须注意。