我的是：<!DOCTYPE html>
博客园：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
关于HTML文档类型参考：http://i.wanz.im/2010/05/28/why_doctype_html/
检查发现JS在获取当前页面可视大小，和页面滚动位置有差别！在页面包含一个2000*2000的DIV是IE和Chrome在不同HTML文档类型测试整理数据如下：标准：<!DOCTYPE html>特殊：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
当HTML中未添加HTML文档类型时，默认为特殊模式！
Chrome标准
Chrome特殊
IE标准
IE特殊
document.body.clientTop;
0
0
0
2
document.body.clientLeft;
0
0
0
2
document.body.clientWidth;
473
473
471
471
document.body.clientHeight;
2000
625
2000
604
document.body.scrollTop;
224
289
0
255
document.body.scrollLeft;
315
388
0
278
document.body.scrollWidth;
2005
2005
2005
2010
document.body.scrollHeight;
2010
2010
2000
2005
document.body.offsetTop;
0
0
0
0
document.body.offsetLeft;
0
0
0
0
document.body.offsetWidth;
473
473
471
492
document.body.offsetHeight;
2000
2000
2000
625
document.documentElement.clientTop;
0
0
0
0
document.documentElement.clientLeft;
0
0
0
0
document.documentElement.clientWidth;
473
473
471
0
document.documentElement.clientHeight;
625
2010
604
0
document.documentElement.scrollTop;
0
0
199
0
document.documentElement.scrollLeft;
0
0
241
0
document.documentElement.scrollWidth;
2005
2005
2005
492
document.documentElement.scrollHeight;
2010
2010
2010
625
document.documentElement.offsetTop;
0
0
0
0
document.documentElement.offsetLeft;
0
0
0
0
document.documentElement.offsetWidth;
473
473
492
492
document.documentElement.offsetHeight;
2010
2010
625
625
分析：
页面总宽度：document.body.scrollWidth;页面总高度：document.body.scrollHeight;Chrome页面位置：document.body.scrollTop; document.body.scrollLeft;Chrome标准页面可视区域：document.documentElement.clientWidth; document.documentElement.clientHeight;Chrome特殊页面可视区域：document.body.clientWidth; document.body.clientHeight;IE标准页面位置：document.documentElement.scrollTop; document.documentElement.scrollLeft;IE标准页面可视区域：document.documentElement.clientWidth; document.documentElement.clientHeight;IE特殊页面位置：document.body.scrollTop; document.body.scrollLeft;IE特殊页面可视区域：document.body.clientWidth; document.body.clientHeight;JS代码如下：复制代码代码如下: function getSize() { var obj = new Object(); obj.allWidth = document.body.scrollWidth; obj.allHeight = document.body.scrollHeight; if (-[1, ]) { //非IE obj.top = document.body.scrollTop; obj.left = document.body.scrollLeft; if (document.compatMode === 'CSS1Compat') { obj.width = document.documentElement.clientWidth; obj.height = document.documentElement.clientHeight; } else { obj.width = document.body.clientWidth; obj.height = document.body.clientHeight; } } else { if (document.compatMode === 'CSS1Compat') { obj.width = document.documentElement.clientWidth; obj.height = document.documentElement.clientHeight; obj.top = document.documentElement.scrollTop; obj.left = document.documentElement.scrollLeft; } else { obj.width = document.body.clientWidth; obj.height = document.body.clientHeight; obj.top = document.body.scrollTop; obj.left = document.body.scrollLeft; } } alert(obj.top); alert(obj.left); alert(obj.width); alert(obj.height); return obj; } 注：发现博客园首页的HTML文档类型为： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 为什么和随笔展示页不一样呢？ 欢迎转载，转载请注明：转载自[ http://www.cnblogs.com/zjfree/ ]
推荐阅读
一个IE死机bug
复制代码代码如下:<style type="text/css">#ab{margin:0 25px;position:relative;border:1px solid;font:bold;text-decoration:none;list-style:none;}a:hover{display:block;color:#000;width:50px;}#cd{displa>>>详细阅读
本文标题：HTML文档类型详解 推荐
地址：http://www.17bianji.com/kaifa2/XML/15595.html
1/2 1
网友点评
精彩导读
科技快报
品牌展示