获取页面高宽度

获取页面高宽度

标准模式下(使用*{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的滚动条去掉以后还会有很大差别,太烦了就没测试...


网名: 天堂左我往右