body だとどうなるか

[11] overflow 通常時

	Firefox3		Safari3		Opera 9.52		WinIE7
	無奇癖	奇癖	無奇癖	奇癖	無奇癖	奇癖	無奇癖	奇癖
documentElement.offset*	border箱 (padding辺)		border箱		border箱 (margin辺)	border箱	viewport 内容箱	viewport border箱
body.offset*	border箱 (padding辺)		border箱			viewport 内容箱 + スクロールバー	border箱 (根要素 margin辺)	viewport border箱
documentElement.client*	viewport	padding箱 (border辺)	viewport	padding箱 (border辺)	viewport	縦: padding箱 (border辺); 横: viewport	viewport 内容箱 (border辺)	N/A
body.client*	padding箱 (border辺)	viewport	padding箱 (border辺)	viewport¶	padding箱 (border辺)	viewport	padding箱 (border辺)	viewport 内容箱
documentElement.scroll* (Width/Height)	画布可視域	border箱					margin箱左上〜border箱右下	viewport border箱
body.scroll* (Width/Height)	border箱	画布可視域			border箱	画布可視域	(拡張) padding箱
documentElement.scroll* (Top/Left)	○				○		○
body.scroll* (Top/Left)		○	○	○		○		○

[13] html, body 共に overflow: scroll の時 (overflow の項を参照。)

	Firefox3		Opera 9.52
	無奇癖	奇癖	無奇癖	奇癖
documentElement.offset*	border箱 (padding辺)		border箱 (margin辺)	border箱
body.offset*	border箱 (padding辺)		border箱	viewport 内容箱 + スクロールバー
documentElement.client*	viewport	padding箱 (border辺)	viewport	縦: padding箱 (border辺); 横: viewport
body.client*	☆padding箱 可視部 (border辺)		padding箱 可視部 (border辺)	viewport
documentElement.scroll* (Width/Height)	画布可視域	border箱	☆※	border箱
body.scroll* (Width/Height)	☆padding箱 内容			画布可視域
documentElement.scroll* (Top/Left)	○		○
body.scroll* (Top/Left)		☆		○

[12] 凡例:

• 明記していないものはその要素自体が基準。
• 括弧内は座標原点 (左上隅)。括弧省略時はその対象物の左上隅が原点。
• scrollTop/scrollLeft は、 viewport のスクロールバーの状態を反映するか否か。
• ※: 画布上の箱 (absolute は含むが、 fixed は含まない。) の border箱をすべて包含する箱。
• ☆: 2表の異なり。
• ¶: top、left に body の border-top-width、 border-left-width を加算。

[10] 注意:

• WinIE の viewport には border箱と 内容箱がある。
• それ以外のブラウザの viewport は原則として内容箱 (スクロールバーを含まない) を指す。
• 画布可視域: 画布のうち、使用されている正の領域。
• Safari の奇癖モードは html と body の箱を viewport にあわせて伸張する (次元を明示していない場合)。
• 拡張 padding箱: WinIE7 の奇癖モードでは body の border が viewport の border になる。body の margin + border + padding の領域は padding のように扱われるので、これを拡張 padding箱と呼ぶ (border に相当する部分は描画されない; margin に相当する部分にも背景色が塗られる)。 html の padding より外側は無視される。

body 外の要素だとどうなるか?

[5] html 要素に appendChild してみた。 https://suika.suikawiki.org/~wakaba/-temp/test/dom/element/cssom/offset/ の offset-*-html-child-*。

[6] offsetParent:

• Firefox3: body
• Opera9、WebKit: null
• WinIE7: null (ただし、 html に appendChild した次のレンダリングの時点で変なエラーが出る。)

奇癖モードの場合や html に background-color を指定した場合でも変わらず。

[7] offsetTop、offsetLeft:

• Firefox3: top や left の値。
• それ以外: 0。

[9] ちなみに getBoundingClientRect なら Firefox3、 Opera9 共正しい値が取れます。

関連

[8] getClientRects, getBoundingClientRect というのもあります。

[14] [cssom-view] Web compatibility of float return values for offsetWidth/Height ( (Boris Zbarsky 著, 2014-07-03 00:21:25 +09:00 版)) http://lists.w3.org/Archives/Public/www-style/2014Jul/0035.html