IE ,FF等各个浏览器宽度与高度的解释

无DTD文档格式时，各浏览器对document.body各属性的解释多种多样，在最大化和非最大化情况下解释又会有些出入，而在加上DTD文档格式后，IE7,FF,OPERA这三个浏览器表现出了惊人的一致性，只有IE6在页面内容超出窗口大小时出现了大变化（具体请看IE6部分），也就是说在正常的窗口最大化情况下，四个浏览器对这些属性的解释都是一样的,既：

scrollHeight= 内容实际高度；
scrollWidth=可视区域宽度；
clientWidth=可视区域宽度；
clientHeight=内容实际高度；
offsetWidth=可视区域宽度；
offsetHeight=内容实际高度；

IE6在页面内容超出窗口大小时将宽度属性scrollWidth、clientWidth、offsetWidth都解释为内容实际宽度。

只有两种解释：所有的宽度属性(?Width)被解释为可视区域宽度，高度属性(?Height)被解释为内容实际的高度。很吃惊，但经过我多次测试（我还用高度1400、宽度为1600的内容测试过），得出的结论和上面的一致，不管是多高多宽，在申明了文档类型DTD之后，这些属性的解释就和滚动条、边框没有关系了。这个结果和网上流传的大不相同啊，哈哈！但我想我是对的！希望能传播给大家正确的知识！

建议：
1.在使用这些属性时，一定要申明文档类型！
2.IE6浏览器下要做相应的修正！
3. 尽量不要用到这些属性，因为会让你很晕=.=!
在限定了文档类型的情况下，多数浏览器对document.body属性的解释都是相同的：在加上DTD文档格式后，IE7,FF,OPERA 这三个浏览器表现出了惊人的一致性，只有IE6在页面内容超出窗口大小时出现了大变化（具体请看IE6部分），也就是说在正常的窗口最大化情况下，四个浏览器对这些属性的解释都是一样的,既：

body.scrollHeight=内容实际高度；
body.scrollWidth=可视区域宽度；
body.clientHeight=内容实际高度；
body.clientWidth=可视区域宽度；
body.offsetHeight=内容实际高度；
body.offsetWidth=可视区域宽度；

IE6在页面内容超出窗口大小时将宽度属性scrollWidth、clientWidth、offsetWidth都解释为内容实际宽度。

上次的测试说明了document.body属性并不会给我们返回预期的结果，比如我们用document.body.clientHeight原本想取得“页面可见区域高度”，可实际上返回的是“页面实际内容高度”。

那我们怎么办呢？难道加上了文档DTD类型之后就再也不能取到“可见区域高度”和“内容实际宽度”等等属性了吗？

其实，我们可以用document.documentElement代替document.body来获取我们想要的结果

将代码中的document.body替换为document.documentElement，再来看看各浏览器下的实际结果：

IE6: