2006年07月12日

標準準拠/過去互換とウィンドウの幅

すげーややこしい……

html4.01を標準準拠モードで書くか過去互換モードで書くかによって、javascriptでのウィンドウ幅の取得方法が変わってしまう模様。
しかもIEとFireFoxで微妙に挙動が違う!

とりあえず実験結果をまとめてみたですよ。
IEの標準準拠モード

 document.body.clientWidth=body要素の幅
 document.documentElement.clientWidth=ウィンドウに表示されている領域の幅

<スタイルシートとの関係>
・body要素のmarginを指定しておらず、ウィンドウ内に全ての要素がおさまっている場合(横スクロールなし)
 →document.body.clientWidthはdocument.documentElement.clientWidthより20小さい

・body要素のmarginを0またはautoに指定し、ウィンドウ内に全ての要素がおさまっている場合(横スクロールなし)
 →document.body.clientWidthとdocument.documentElement.clientWidthは等しい

・body要素のmarginを0またはauto以外に指定し、ウィンドウ内に全ての要素がおさまっている場合(横スクロールなし)
 →document.body.clientWidthはdocument.documentElement.clientWidthから左右のマージンを引いた数

・ウィンドウ内に全ての要素がおさまらない場合(横スクロール出現)
 →document.body.clientWidthは子要素の幅になるため、document.documentElement.clientWidthより大きい
  ※body要素のmargin指定の有無は影響しない

※上記全ての場合で、document.documentElement.clientWidthは変化しない


IEの過去互換モード

 document.body.clientWidth=ウィンドウに表示されている領域の幅
 document.documentElement.clientWidth=0

スタイルシートや子要素の幅による変動なし

FireFoxの標準準拠モード

 document.body.clientWidth=body要素の幅
 document.documentElement.clientWidth=ウィンドウに表示されている領域の幅

<スタイルシートとの関係>
・body要素のmarginを指定しておらず、ウィンドウ内に全ての要素がおさまっている場合(横スクロールなし)
 →document.body.clientWidthはdocument.documentElement.clientWidthより16小さい

・body要素のmarginを0またはautoに指定し、ウィンドウ内に全ての要素がおさまっている場合(横スクロールなし)
 →document.body.clientWidthとdocument.documentElement.clientWidthは等しい

・body要素のmarginを0またはauto以外に指定し、ウィンドウ内に全ての要素がおさまっている場合(横スクロールなし)
 →document.body.clientWidthはdocument.documentElement.clientWidthから左右のマージンを引いた数

・ウィンドウ内に全ての要素がおさまらない場合(横スクロール出現)
 →document.body.clientWidthはウィンドウに表示されている領域の幅からbody要素のmarginを引いた数

※上記全ての場合で、document.documentElement.clientWidthは変化しない

FireFoxの過去互換モード
 document.body.clientWidth=ウィンドウに表示されている領域の幅
 document.documentElement.clientWidth=ウィンドウに表示されている領域の幅

<スタイルシートとの関係>
・ウィンドウ内に全ての要素がおさまっている場合(横スクロールなし)
 →document.body.clientWidthとdocument.documentElement.clientWidthは等しい

・ウィンドウ内に全ての要素がおさまらない場合(横スクロール出現)
 →document.documentElement.clientWidthは子要素の幅+body要素のマージン

※上記全ての場合で、document.body.clientWidthは変化しない


……てな感じらしい。
自分で書くときは、標準準拠ならdocument.documentElement.clientWidth、過去互換ならdocument.body.clientWidthを使うようにすればバグは避けられそうだけど、配布物は意識しとかないとドツボにはまりそうですな。

あ、ちなみに、innerWidth(NN用)がからむとさらにややこしい。
Netscape7.1は、document.documentElement.clientWidthに対応してくれないんだな。document.body.clientWidthは対応してるとゆーのに。(そしてdocument.bodyだとNN4.7には効かなかったよーな……あーもー)


posted by 文月夕 at 12:02| Comment(3) | TrackBack(0) | web技 | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
ごぶさたしております。以前、↓javascriptの再配布許可をいただいた者です。ttp://htmldwarf.seesaa.net/article/6120367.html

最近、こんな記事を知りました。
ttp://sug.blog2.fc2.com/blog-entry-502.html
いま、文月さんが何をお考えでこの記事を書いていらっしゃるのか、上記がお役に立つかどうかわかりませんが。
すでにご存知の手法でしたら、失礼お許しください。
Posted by 阿檀 at 2006年07月29日 18:27
>阿檀さん
こんにちは、ご無沙汰してます。
阿檀さんのブログもちょくちょく見せていただいてますので、ご紹介いただいた記事は拝見してます。
expression()を使うと記述が短くていいですね。

ただ、結局のところjavascriptを使うことには変わらないので、今回の記事で扱っている「標準モード/過去互換モードにおける挙動の違い」はどちらにしろ関係するのではと思います。(まだ実験してはいないですが)

なお、今回の記事自体は、別件でウィンドウ幅を取得するスクリプトを書く必要があって、その際に実験した結果をまとめてみたものだったりはします。
Posted by 文月夕@管理人 at 2006年07月31日 08:56
こんばんわ。やはり、ご存知でしたか。

正直、モードの挙動のあたりは、今ひとつまだ理解できておりません。…理解できていないなら書くなという感じですが(汗)

失礼いたしました。

当方のブログ、見ていただいてるとは、意外でした。もうちょっとマットウな記事を書かないと、と、思ったことでございます^^
Posted by 阿檀 at 2006年08月07日 00:49
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック

PR