23

プロパティdocument.body.clientHeightdocument.body.clientWidth IE7、IE8とFirefoxに異なる値を返す:clientHeight/clientWidth異なるブラウザで異なる値を返す

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)間で一貫した同等のプロパティがありますか?

+2

実際にスクリーンショットを撮って、さまざまなブラウザでclientHeightを測定しますか? Betchaの数字は正しいです、利用可能なスペースを測定する、さまざまなブラウザは、URLの場所のテキストボックス、ボタンなどから予約されているスペースの量によって異なる使用可能なスペースを持っています... – infocyde

答えて

4

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

+10

clientWidthとclientHeightのjQueryとは何ですか? – Ngm

+9

jQuery $(document).height $(document).widthはまた、異なるブラウザで変数値を返します。 – Ngm

+17

&@Ngm:jQuery '.height()'と '.width()'は 'clientHeight'および' clientWidth 'は、パディングを含まないためです。一方、 '.innerHeight()'はスクロールバーを考慮しません。** HTML DOM 'clientHeight'にはjQueryの同等のものはありません。** –

0

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

23

Paul Aは、なぜ矛盾が存在するのか、Ngmが提供する解決策が間違っている(JQueryという意味で)正しいのです。

のjQueryでclientHeightとclientWidthの当量(1.3)

+9

'.height()'には要素の埋め込みがありません。誰かが '.innerHeight()'を使用すると、要素がスクロール可能なときにスクロールバーを考慮しないので、それでもOKではありません。 'clientHeight'は内側の高さですが、目に見えるものだけです(スクロールバーはありません)。 –

+3

私はこれが本当だとは思わない。 '$(window).height()'と 'document.documentElement.clientHeight'は異なるブラウザでは全く異なる値を返すことがよくあります。 –

3
$(window).width(), $(window).height() 

のjQueryでoffsetHeightとoffsetWidthの当量が $(ウィンドウ).width()、$(ウィンドウ).height()であります これはclientHeightとclientWidthではありません

0

私は同様の問題がありました - firefoxはobj.clientHeightの正しい値を返しましたが、0を返していませんでした。obj.offsetHeightに変更しました。つまり、クライアントの身長があると思われます。そうすれば、それが可能になります。

5

本文要素は、通常はブラウザビューポートです。このように は、それはあなたがを設定

高さも変化するという事実が、また私に語った...原因ブラウザクロームの境界線、スクロールバー、垂直方向のスペースビーイングは、メニューやその他もろもろで取りにクロスブラウザの異なる寸法になりますCSSによる100%のボディ/ htmlの身長の高さは、内の要素に通常依存するので..

あなたは、CSSを通じて固定値に要素の幅を設定するか、それがスタイルプロパティのない限り、それはディメンションですが、原則としてクロスブラウザーやバージョンを変更します。おそらく、インストールしたプラグインにも依存しますeブラウザ。このような場合の定数値は、ルールの例外です。

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

しかし、clientWidthを呼び出す主な理由は、正確に結果の差異が予想されるためです。あなたが一定の幅を取得します知っていると値が分かっている場合、... clientWidthが冗長で起動

1

Element.clientWidth & Element.clientHeight リターンの高さ/幅その要素のコンテンツに加えて適用可能なパディング

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

.clientWidth & .clientHeightは、現在は草案段階のCSSOM表示モジュール仕様書に含まれています。現代のブラウザはこの仕様を一貫して実装していますが、従来のプラットフォーム間で一貫したパフォーマンスを保証するために、jQueryの実装を引き続き使用する必要があります。

追加情報:

  • ます。https://developer.mozilla [ドット] ORG/EN-US /ドキュメント/ウェブ/ API/Element.clientWidth
  • ます。https://developer.mozilla [ドット] org/ja-ja/docs/Web/API/Element.clientHeight
1

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

関連する問題