ブラウザ間での clientHeight 値と clientWidth 値の不一致

Internet Explorer 7、Internet Explorer 8、Firefox ブラウザでは、document.body.clientHeight と clientWidth 値によって返される値にばらつきがあります。 document.body.clientWidth プロパティ。これらの不一致の背後にある理由を理解することは、ブラウザ間の互換性にとって非常に重要です。

原因：

Paul A が正しく説明したように、これらのプロパティはブラウザ固有のレンダリング エンジンの影響を受けます。そしてビューポートの動作。 Internet Explorer は Firefox とは異なるビューポート モデルを利用しているため、報告されるクライアントのサイズにばらつきが生じます。さらに、スクロールバー、ウィンドウ クロム、およびパディングがこれらの値に影響を与える可能性があります。

jQuery を使用しないブラウザ間での同等のプロパティ:

document.body.clientHeight および document.body とは異なります。ブラウザ固有の解釈の対象となる .clientWidth プロパティ、jQuery によって提供される $(window).width() および $(window).height() は、一貫した代替手段を提供します。これらの jQuery 関数はビューポートの寸法を正確に表し、レンダリング エンジンの固有の違いに依存することなく、さまざまなブラウザ間で一貫した結果を保証します。したがって、ビューポート サイズを正確に決定する場合は、ブラウザ間の互換性のために jQuery のメソッドを使用することをお勧めします。