HTML文檔類型詳解推薦

作者：Eve Cole 更新時間：2025-05-11 09:00:04

我的是： <!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代碼如下：

複製代碼