当前位置: 代码迷 >> Web前端 >> 基准、非标准,多游览器,client、offset、scroll等函数所有解析
  详细解决方案

基准、非标准,多游览器,client、offset、scroll等函数所有解析

热度:463   发布时间:2012-08-22 09:50:35.0
标准、非标准,多游览器,client、offset、scroll等函数所有解析。

                   
                                                               
[url=http://bbs.51js.com/misc.php?action=viewratings&tid=79014&pid=558512][/url]
标准、非标准,多游览器,client、offset、scroll等函数所有解析。
clientTop,clientLeft
clientWidth,clientHeight
offsetTop,offsetLeft
offsetWidth,offsetHeight
scrollTop,scrollLeft
scrollWidth,scrollHeight
自写JS类,需要考虑标准和非标准下使用的用户,又得考虑多游览器。
所以做了这个研究,DIV,HTML,BODY的结果都不相同,非常让人郁闷,
发出来做共巷研究。
所以结果发出。
 
HTML、BODY。测试。
窗体大小800*300
(表担心,我是用PS去测量的大小。)

Html css: margin:21px 22px 23px 24px;
Body css: margin:11px 12px 13px 14px;
有滚动状态时,将在BODY中增加Div为,大小800*300
Div。测试。
大小800*600,包括滚动条在内。
有滚动状态,DIV内增加DIV850*300
标准 显示滚动条 无滚动状态.
IE 7 Hmtl:
    clientXY:0,0
    clientWH:800,300
    offsetXY:0,0
    offsetWH:800,300
    scrollXY:0,0
    scrollWH:800,248
IE 7 Body:
    clientXY:0,0
    clientWH:774,224
    offsetXY:11,14
    offsetWH:774,224
    scrollXY:0,0
    scrollWH:774,224
IE 6 Hmtl:
    clientXY:2,2
    clientWH:800,300
    offsetXY:0,0
    offsetWH:821,321
    scrollXY:0,0
    scrollWH:800,220
IE 6 Body:
    clientXY:0,0
    clientWH:774,196
    offsetXY:11,14
    offsetWH:774,196
    scrollXY:0,0
    scrollWH:774,196
IE 5.5 Hmtl:
    clientXY:0,0
    clientWH:0,0
    offsetXY:0,0
    offsetWH:821,321
    scrollXY:0,0
    scrollWH:821,321
IE 5.5 Body:
    clientXY:2,2
    clientWH:800,300
    offsetXY:0,0
    offsetWH:821,321
    scrollXY:0,0
    scrollWH:800,220
FF 3 Hmtl:
    clientXY:0,0
    clientWH:800,300
    offsetXY:0,0
    offsetWH:800,220
    scrollXY:0,0
    scrollWH:800,300
FF 3 Body:
    clientXY:0,0
    clientWH:774,196
    offsetXY:0,0
    offsetWH:774,196
    scrollXY:0,0
    scrollWH:774,196
FF 2 Hmtl:
    clientXY:undefined,undefined
    clientWH:800,300
    offsetXY:0,0
    offsetWH:800,234
    scrollXY:0,0
    scrollWH:800,300
FF 2 Body:
    clientXY:undefined,undefined
    clientWH:774,210
    offsetXY:0,0
    offsetWH:774,210
    scrollXY:0,0
    scrollWH:774,210
非标准 显示滚动条 无滚动状态.
IE 7 Hmtl:
    clientXY:0,0
    clientWH:0,0
    offsetXY:0,0
    offsetWH:817,317
    scrollXY:0,0
    scrollWH:817,317
IE 7 Body:
    clientXY:0,0
    clientWH:800,300
    offsetXY:0,0
    offsetWH:817,317
    scrollXY:0,0
    scrollWH:800,248
IE 6 Hmtl:
    clientXY:0,0
    clientWH:0,0
    offsetXY:0,0
    offsetWH:821,321
    scrollXY:0,0
    scrollWH:821,321
IE 6 Body:
    clientXY:2,2
    clientWH:800,300
    offsetXY:0,0
    offsetWH:821,321
    scrollXY:0,0
    scrollWH:800,220
IE 5.5 Hmtl:
    clientXY:0,0
    clientWH:0,0
    offsetXY:0,0
    offsetWH:821,321
    scrollXY:0,0
    scrollWH:821,321
IE 5.5 Body:
    clientXY:2,2
    clientWH:800,300
    offsetXY:0,0
    offsetWH:821,321
    scrollXY:0,0
    scrollWH:800,220
FF 3 Hmtl:
    clientXY:0,0
    clientWH:800,220
    offsetXY:0,0
    offsetWH:800,220
    scrollXY:0,0
    scrollWH:800,220
FF 3 Body:
    clientXY:0,0
    clientWH:800,300
    offsetXY:0,0
    offsetWH:774,196
    scrollXY:0,0
    scrollWH:800,300
FF 2 Hmtl:
    clientXY:undefined,undefined
    clientWH:800,234
    offsetXY:0,0
    offsetWH:800,234
    scrollXY:0,0
    scrollWH:800,234
FF 2 Body:
    clientXY:undefined,undefined
    clientWH:800,300
    offsetXY:0,0
    offsetWH:774,210
    scrollXY:0,0
    scrollWH:800,300
标准,有滚动条,有滚动状态
IE 7 Hmtl:
    clientXY:0,0
    clientWH:800,300
    offsetXY:0,0
    offsetWH:800,300
    scrollXY:24,14
    scrollWH:814,324
IE 7 Body:
    clientXY:0,0
    clientWH:774,300
    offsetXY:11,14
    offsetWH:774,300
    scrollXY:0,0
    scrollWH:800,300
IE 6 Hmtl:
    clientXY:2,2
    clientWH:800,300
    offsetXY:0,0
    offsetWH:821,321
    scrollXY:24,26
    scrollWH:826,324
IE 6 Body:
    clientXY:0,0
    clientWH:800,300
    offsetXY:11,14
    offsetWH:800,300
    scrollXY:0,0
    scrollWH:800,300
IE 5.5 Hmtl:
    clientXY:0,0
    clientWH:0,0
    offsetXY:0,0
    offsetWH:821,321
    scrollXY:0,0
    scrollWH:821,321
IE 5.5 Body:
    clientXY:2,2
    clientWH:800,300
    offsetXY:0,0
    offsetWH:821,321
    scrollXY:24,26
    scrollWH:826,324
FF 3 Hmtl:
    clientXY:0,0
    clientWH:800,300
    offsetXY:0,0
    offsetWH:800,324
    scrollXY:24,14
    scrollWH:814,324
FF 3 Body:
    clientXY:0,0
    clientWH:774,300
    offsetXY:0,0
    offsetWH:774,300
    scrollXY:0,0
    scrollWH:774,300
FF 2 Hmtl:
    clientXY:undefined,undefined
    clientWH:800,300
    offsetXY:0,0
    offsetWH:800,324
    scrollXY:24,14
    scrollWH:814,324
FF 2 Body:
    clientXY:undefined,undefined
    clientWH:774,300
    offsetXY:0,0
    offsetWH:774,300
    scrollXY:0,0
    scrollWH:774,300
非标准,有滚动条,有滚动状态
IE 7 Hmtl:
    clientXY:0,0
    clientWH:0,0
    offsetXY:0,0
    offsetWH:817,317
    scrollXY:0,0
    scrollWH:817,317
IE 7 Body:
    clientXY:0,0
    clientWH:800,300
    offsetXY:0,0
    offsetWH:817,317
    scrollXY:24,26
    scrollWH:826,324
IE 6 Hmtl:
    clientXY:0,0
    clientWH:0,0
    offsetXY:0,0
    offsetWH:821,321
    scrollXY:0,0
    scrollWH:821,321
IE 6 Body:
    clientXY:2,2
    clientWH:800,300
    offsetXY:0,0
    offsetWH:821,321
    scrollXY:24,26
    scrollWH:826,324
IE 5.5 Hmtl:
    clientXY:0,0
    clientWH:0,0
    offsetXY:0,0
    offsetWH:821,321
    scrollXY:0,0
    scrollWH:821,321
IE 5.5 Body:
    clientXY:2,2
    clientWH:800,300
    offsetXY:0,0
    offsetWH:821,321
    scrollXY:24,26
    scrollWH:826,324
FF 3 Hmtl:
    clientXY:0,0
    clientWH:800,324
    offsetXY:0,0
    offsetWH:800,324
    scrollXY:0,0
    scrollWH:800,324
FF 3 Body:
    clientXY:0,0
    clientWH:800,300
    offsetXY:0,0
    offsetWH:774,300
    scrollXY:24,14
    scrollWH:814,324
FF 2 Hmtl:
    clientXY:undefined,undefined
    clientWH:800,324
    offsetXY:0,0
    offsetWH:800,324
    scrollXY:0,0
    scrollWH:800,324
FF 2 Body:
    clientXY:undefined,undefined
    clientWH:800,300
    offsetXY:0,0
    offsetWH:774,300
    scrollXY:24,14
    scrollWH:814,324
Div无滚动 标准
IE 7 Hmtl:
    clientXY:0,0
    clientWH:783,283
    offsetXY:0,0
    offsetWH:800,300
    scrollXY:0,0
    scrollWH:783,112
IE 6 Hmtl:
    clientXY:0,0
    clientWH:783,283
    offsetXY:0,0
    offsetWH:800,300
    scrollXY:0,0
    scrollWH:783,98
IE 5.5 Hmtl:
    clientXY:0,0
    clientWH:783,283
    offsetXY:15,10
    offsetWH:800,300
    scrollXY:0,0
    scrollWH:783,98
FF 3 Hmtl:
    clientXY:0,0
    clientWH:783,283
    offsetXY:8,8
    offsetWH:800,300
    scrollXY:0,0
    scrollWH:783,283
FF 2 Hmtl:
    clientXY:undefined,undefined
    clientWH:784,284
    offsetXY:8,8
    offsetWH:800,300
    scrollXY:0,0
    scrollWH:784,284
Div无滚动 非标准
IE 7 Hmtl:
    clientXY:0,0
    clientWH:783,283
    offsetXY:15,10
    offsetWH:800,300
    scrollXY:0,0
    scrollWH:783,112
IE 6 Hmtl:
    clientXY:0,0
    clientWH:783,283
    offsetXY:15,10
    offsetWH:800,300
    scrollXY:0,0
    scrollWH:783,98
IE 5.5 Hmtl:
    clientXY:0,0
    clientWH:783,283
    offsetXY:15,10
    offsetWH:800,300
    scrollXY:0,0
    scrollWH:783,98
FF 3 Hmtl:
    clientXY:0,0
    clientWH:783,283
    offsetXY:8,8
    offsetWH:800,300
    scrollXY:0,0
    scrollWH:783,283
FF 2 Hmtl:
    clientXY:undefined,undefined
    clientWH:784,284
    offsetXY:8,8
    offsetWH:800,300
    scrollXY:0,0
    scrollWH:784,284
DIV有滚动 标准
IE 7 Hmtl:
    clientXY:0,0
    clientWH:783,283
    offsetXY:15,10
    offsetWH:800,300
    scrollXY:67,67
    scrollWH:850,350
IE 6 Hmtl:
    clientXY:0,0
    clientWH:783,283
    offsetXY:15,10
    offsetWH:800,300
    scrollXY:67,67
    scrollWH:850,350
IE 5.5 Hmtl:
    clientXY:0,0
    clientWH:783,283
    offsetXY:15,10
    offsetWH:800,300
    scrollXY:0,0
    scrollWH:850,350
FF 3 Hmtl:
    clientXY:0,0
    clientWH:783,283
    offsetXY:8,8
    offsetWH:800,300
    scrollXY:67,67
    scrollWH:850,350
FF 2 Hmtl:
    clientXY:0,0
    clientWH:783,283
    offsetXY:8,8
    offsetWH:800,300
    scrollXY:67,67
    scrollWH:850,350
DIV有滚动 非标准
IE 7 Hmtl:
    clientXY:0,0
    clientWH:783,283
    offsetXY:15,10
    offsetWH:800,300
    scrollXY:67,67
    scrollWH:850,350
IE 6 Hmtl:
    clientXY:0,0
    clientWH:783,283
    offsetXY:15,10
    offsetWH:800,300
    scrollXY:67,67
    scrollWH:850,350
IE 5.5 Hmtl:
    clientXY:0,0
    clientWH:783,283
    offsetXY:15,10
    offsetWH:800,300
    scrollXY:67,67
    scrollWH:850,350
FF 3 Hmtl:
    clientXY:0,0
    clientWH:783,283
    offsetXY:8,8
    offsetWH:800,300
    scrollXY:67,67
    scrollWH:850,350
FF 2 Hmtl:
    clientXY:undefined,undefined
    clientWH:784,284
    offsetXY:8,8
    offsetWH:800,300
    scrollXY:66,66
    scrollWH:850,350
  相关解决方案