web-dev-qa-db-ja.com

異なるブラウザで異なる値を返すclientHeight / clientWidth

プロパティ document.body.clientHeightおよびdocument.body.clientWidth IE7、IE8、Firefoxで異なる値を返します。

IE 8：

document.body.clientHeight : 704 
document.body.clientWidth  : 1148

IE 7：

document.body.clientHeight : 704 
document.body.clientWidth  : 1132

FireFox：

document.body.clientHeight : 620 
document.body.clientWidth  : 1152

なぜこの矛盾が存在するのですか？
jQueryを使用せずに異なるブラウザー（IE8、IE7、Firefox）で一貫した同等のプロパティはありますか？

javascriptcssfirefoxinternet-explorer-8internet-explorer-7
24
nmdr

これは、ブラウザのボックスモデルに関係しています。 jQueryまたは別のJavaScript抽象化ライブラリなどを使用して、DOMモデルを正規化します。

5
Paul Alexander

Paul Aは、矛盾が存在する理由については正しいのですが、Ngmが提供するソリューションは間違っています（JQueryの意味で）。

Jquery（1.3）のclientHeightとclientWidthに相当するのは

$(window).width(), $(window).height()
23
arajek

body要素は利用可能な幅を取ります。これは通常、ブラウザのビューポートです。そのため、ブラウザchrome境界線、スクロールバー、メニューなどが占める垂直方向のスペースにより、ブラウザ間で異なるサイズになります...

高さも異なるという事実は、CSSを介してbody/html heightを100％に設定することも教えてくれます。これは、通常、高さがbody内の要素に依存しているためです。

body要素の幅をcssまたはそのスタイルプロパティを介して固定値に設定しない限り、その寸法は原則として、常にクロスブラウザー/バージョンによって異なり、おそらくインストールしたプラグインによっても異なりますブラウザ。このような場合の定数値は、ルールの例外です...

ブラウザのビューポートの自動幅を使用しない他の要素で.clientWidthを呼び出すと、常に要素 'width' + 'padding'が返されます。したがって、幅が200でパディングが20のdivのclientWidth = 240（左右に20パディング）があります。

ただし、clientWidthを呼び出す主な理由は、結果に予想される矛盾があるためです。一定の幅が得られ、値がわかっている場合、clientWidthの呼び出しは冗長です...

5
BGerrissen

JQueryのoffsetHeightとoffsetWidthに相当するものは$（window）.width（）、$（window）.height（）です。clientHeightとclientWidthではありません

3
Niels Steenbeek

_Element.clientWidth_＆_Element.clientHeight_は、該当するパディングに加えて、その要素のコンテンツの高さ/幅を返します。

これらのjQuery実装は次のとおりです。 $(target).outerWidth() ＆ $(target).outerHeight()

_.clientWidth_＆_.clientHeight_は、現在作業中のドラフト段階にあるCSSOM View Module仕様に含まれています。最新のブラウザにはこの仕様の一貫した実装がありますが、レガシープラットフォーム全体で一貫したパフォーマンスを保証するには、jQuery実装を引き続き使用する必要があります。

追加情報：

  • https：//developer.mozilla [dot] org/en-US/docs/Web/API/Element.clientWidth
  • https：//developer.mozilla [dot] org/en-US/docs/Web/API/Element.clientHeight
1
Brice

ClientHeightの問題を解決するためにしたことは、コントロールfirstChildのclientHightを使用することです。 IE 11を使用してデータベースからラベルを印刷し、IE 8で機能したclientHeightがIE 11で高さ0を返していました。プロパティが見つかりましたfirstChildとしてリストされ、clientHeightでプロパティがあり、実際に私が探していた高さだったコントロールで。コントロールが0のclientSizeを返す場合、firstChildのプロパティを見てください。それは私を助けました...

1
Lee Ann Davidson

私は同様の問題を抱えていました-firefoxはobj.clientHeightの正しい値を返しましたが、0を返しませんでした。obj.offsetHeightに変更し、動作しました。つまり、clientheightの状態があるようです-それは不確かになります...

0
Johnny Darvall

ブラウザウィンドウの詳細情報： http://www.w3schools.com/js/js_window.asp?output=print

0
Biranchi

IEのボックスモデルのバグが原因である可能性があります。これを修正するには、 Box Model Hack を使用できます。

0
Steve Harrison