我的是：<!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/ ]