異なるブラウザで異なる値を返すclientHeight / clientWidth
-
08-07-2019 - |
質問
プロパティ 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)で一貫した同等のプロパティはありますか?
解決
これは、ブラウザのボックスモデルに関連しています。 jQueryや別のJavaScript抽象化ライブラリなどを使用して、DOMモデルを正規化します。
他のヒント
ポールAは、矛盾が存在する理由については正しいのですが、Ngmが提供するソリューションは間違っています(JQueryの意味で)。
jquery(1.3)のclientHeightとclientWidthに相当するものは
$(window).width(), $(window).height()
body 要素は利用可能な幅を取ります。通常、これはブラウザのビューポートです。 そのため、ブラウザのクロム境界線、スクロールバー、メニューなどが占める垂直方向のスペースにより、ブラウザ間で異なるサイズになります...
高さも異なるという事実は、高さが通常 body body / html の高さをcssを介して100%に設定することも教えてくれます> ..
body 要素の幅をcssまたはそのスタイルプロパティを介して固定値に設定しない限り、その寸法は原則として常にブラウザ/バージョンによって異なり、プラグインによっても異なりますブラウザ用にインストールされます。そのような場合の定数値は、ルールの例外です...
ブラウザビューポートの自動幅を使用しない他の要素で.clientWidthを呼び出すと、常に要素 'width' + 'padding'が返されます。したがって、幅が200でパディングが20のdivのclientWidth = 240(左右に20パディング)があります。
ただし、clientWidthを呼び出す主な理由は、結果に予想される矛盾があるためです。一定の幅が得られ、値がわかっている場合、clientWidthの呼び出しは冗長です...
jQueryのoffsetHeightとoffsetWidthに相当するのは $(window).width()、$(window).height() clientHeightとclientWidthではありません
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
clientHeightの問題を解決するためにしたことは、コントロールfirstChildのclientHightを使用することです。 IE 11を使用してデータベースからラベルを印刷し、IE 8で機能するclientHeightがIE 11で高さ0を返していました。firstChildとしてリストされ、clientHeightと実際に私が探していた高さ。コントロールが0のclientSizeを返す場合、firstChildのプロパティを見てください。助けてくれました...
iにも同様の問題がありました-firefoxはobj.clientHeightの正しい値を返しましたが、0を返しませんでした。obj.offsetHeightに変更して動作しました。つまり、clientheightに対していくつかの状態があるようです。
IEのボックスモデルのバグが原因である可能性があります。これを修正するには、 Box Model Hack を使用できます。
ブラウザウィンドウの詳細情報: http://www.w3schools.com/js/js_window.asp?output=print