clientHeight/clientWidth returning different values on different browsers

css, firefox, internet-explorer-7, internet-explorer-8, javascript

Solution

This has to do with the browser's box model. Use something like jQuery or another JavaScript abstraction library to normalize the DOM model.

Problem

Properties `document.body.clientHeight` and `document.body.clientWidth` return different values on IE7, IE8 and 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 ``` Why does this discrepancy exist? Are there any equivalent properties that are consistent across different browsers (IE8, IE7, Firefox) without using jQuery?

Original source