最难就是高和宽

html上的绝对和相对定位简直是种可怕的煎敖，好不容易弄懂了clientHeight、offsetHeight 和 scrollHeight之类的，又搞出一个DOCTYPE的不同。

摘自：[url]http://www.cftea.com/c/2006/12/PCTKER6T0V62S854.asp[/url]
控件的offsetHeight等

假设 obj 为某个 HTML 控件。

obj.offsetTop 指 obj 相对于版面或由 offsetParent 属性指定的父坐标的计算上侧位置，整型，单位像素。

obj.offsetLeft 指 obj 相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置，整型，单位像素。

obj.offsetWidth 指 obj 控件自身的绝对宽度，不包括因 overflow 而未显示的部分，也就是其实际占据的宽度，整型，单位像素。

obj.offsetHeight 指 obj 控件自身的绝对高度，不包括因 overflow 而未显示的部分，也就是其实际占据的高度，整型，单位像素。

我们对前面提到的 offsetParent 作个说明。

offsetParent 获取定义对象 offsetTop 和 offsetLeft 属性的容器对象的引用。offsetTop 与 offsetParent 很复杂，不同浏览器有不同解释，浮动一下解释又不同了，所以我们一般只要理解通过二者可以获得控件在浏览器中的绝对位置即可。

以上属性在 FireFox 中也有效。

摘自：[url]http://www.cftea.com/c/751.asp[/url]
body的clientHeight之类

这四种浏览器分别为IE（Internet Explorer）、NS（Netscape）、Opera、FF（FireFox）。

clientHeight
大家对 clientHeight 都没有什么异议，都认为是内容可视区域的高度，也就是说页面浏览器中可以看到内容的这个区域的高度，一般是最后一个工具条以下到状态栏以上的这个区域，与页面内容无关。

offsetHeight
IE、Opera 认为 offsetHeight = clientHeight + 滚动条 + 边框。
NS、FF 认为 offsetHeight 是网页内容实际高度，可以小于 clientHeight。

scrollHeight
IE、Opera 认为 scrollHeight 是网页内容实际高度，可以小于 clientHeight。
NS、FF 认为 scrollHeight 是网页内容高度，不过最小值是 clientHeight。

简单地说
clientHeight 就是透过浏览器看内容的这个区域高度。
NS、FF 认为 offsetHeight 和 scrollHeight 都是网页内容高度，只不过当网页内容高度小于等于 clientHeight 时，scrollHeight 的值是 clientHeight，而 offsetHeight 可以小于 clientHeight。
IE、Opera 认为 offsetHeight 是可视区域 clientHeight 滚动条加边框。scrollHeight 则是网页内容实际高度。

同理
clientWidth、offsetWidth 和 scrollWidth 的解释与上面相同，只是把高度换成宽度即可。

重要说明

以上是在没有指定 DOCTYPE 的情况下，如果指定了 DOCTYPE，比如：DTD XHTML 1.0 Transitional，则意义又会不同，在这种情况下这三个值都是同一个值，都表示内容的实际高度。新版本的浏览器大多支持根据页面指定的 DOCTYPE 来启用不同的解释器。下载或浏览测试文件。如果要在指定的 DOCTYPE 下按上述意义来应用，怎么办呢？答案是：将 document.body 和 document.documentElement 一起应用，比如：document.documentElement.scrollLeft || document.body.scrollLeft（一般将 document.documentElement 写在前面）

摘自：[url]http://www.cftea.com/c/2008/06/U1FSRIC247DWTK2M.asp[/url]
解决DTD的问题

做页面的时候可能会用到位置固定的层，读取 document.body.scrollTop 来设置层的位置，像这样：

window.onscroll = function ()
{
    var oFix = document.getElementById("divfix");
    oFix.style.top = document.body.scrollTop + "px";
}

可是怎么没有达到预期效果呢，输出 document.body.scrollTop 的值一看，一直都是 0。原来是 DTD 的问题,要是页面直接用 开头的话就没有问题了。但是要符合 web 标准，DTD 当然是不能少的。具有 DTD 时用 document.documentElement.scrollTop 代替 document.body.scrollTop 就可以了。

window.onscroll = function ()
{
    var oFix = document.getElementById("divfix");
    oFix.style.top = document.documentElement.scrollTop + "px";
}

编者注：

    * 页面具有 DTD（或者说指定了 DOCTYPE）时，使用 document.documentElement。
    * 页面不具有 DTD（或者说没有指定了 DOCTYPE）时，使用 document.body。
    * 在 IE 和 Firefox 中均是如此。
    * 为了兼容，可以使用如下代码：
      var scrollTop = window.pageYOffset 
                      || document.documentElement.scrollTop 
                      || document.body.scrollTop 
                      || 0;

神奇，充分说明了js的奇怪性。