HTMLドキュメントタイプの詳細な説明

私のは: <!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 が含まれています。さまざまな HTML ドキュメントタイプでの IE および Chrome テストのデータは次のとおりです。
標準: <!DOCTYPE html>
特別: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

HTML doctype が HTML に追加されていない場合は、デフォルトで特別なモードになります。

	Chrome 標準	Chrome 固有	IE 標準	IEスペシャル
ドキュメント本体のクライアントトップ;	0	0	0	2
ドキュメント本体のクライアント左上;	0	0	0	2
ドキュメントのbodyの幅;	473	473	471	471
ドキュメント本体のクライアントの高さ;	2000	625	2000	604
ドキュメント本体のスクロールトップ;	224	289	0	255
ドキュメント本体を左にスクロールします。	315	388	0	278
ドキュメントのスクロール幅;	2005	2005	2005	2010
ドキュメント本体のスクロールの高さ;	2010	2010	2000	2005
ドキュメント本体のオフセットTop;	0	0	0	0
ドキュメント本体の左オフセット;	0	0	0	0
ドキュメント本体のオフセット幅;	473	473	471	492
ドキュメント本体のオフセット高さ;	2000	2000	2000	625
ドキュメントの要素をクライアントの先頭に追加します。	0	0	0	0
ドキュメントの要素をクライアントの左に配置する。	0	0	0	0
ドキュメント要素のクライアント幅;	473	473	471	0
ドキュメントの要素の高さ。	625	2010	604	0
ドキュメントの要素をスクロールします。	0	0	199	0
ドキュメント要素を左にスクロールします。	0	0	241	0
ドキュメントのスクロール幅;	2005	2005	2005	492
ドキュメントのスクロールの高さ。	2010	2010	2010	625
ドキュメント要素のオフセットTop;	0	0	0	0
ドキュメント要素の左オフセット。	0	0	0	0
ドキュメント要素のオフセット幅;	473	473	492	492
ドキュメント要素のオフセット高さ;	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 コードは次のとおりです。

コードをコピー

コードは次のとおりです。

関数 getSize() {
var obj = 新しいオブジェクト();
obj.allWidth = document.body.scrollWidth;
obj.allHeight = document.body.scrollHeight;
if (-[1, ]) { //IE以外
ドキュメントの先頭部分をスクロールします。
ドキュメントの左端をスクロールします。
document.compatMode === 'CSS1Compat' の場合 {
obj.width = document.documentElement.clientWidth;
obj.height = document.documentElement.clientHeight;
}
それ以外 {
obj.width = document.body.clientWidth;
obj.height = document.body.clientHeight;
}
} それ以外 {
document.compatMode === 'CSS1Compat' の場合 {
obj.width = document.documentElement.clientWidth;
obj.height = document.documentElement.clientHeight;
ドキュメントのスクロールトップを描画します。
ドキュメント要素を左にスクロールします。
}
それ以外 {
obj.width = document.body.clientWidth;
obj.height = document.body.clientHeight;
ドキュメントの先頭部分をスクロールします。
ドキュメントの左端をスクロールします。
}
}
アラート(obj.top);
アラート(obj.left);
アラート(obj.width);
アラート(obj.height);
obj を返します。
}

注: ブログガーデンホームページの HTML ドキュメントタイプは次のようになります。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
エッセイ表示ページと違うのはなぜですか？

転載を歓迎します。次の点を明記してください: [ http://www.cnblogs.com/zjfree/ ] から転載

<<: MySQL MVCCメカニズム原理の詳細な説明

>>: フレックスレイアウトが子要素によって引き伸ばされたときに、コンテンツをコンテナ内に保持する方法