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代码如下：

复制代码

HTML文档类型详解 推荐