Search code examples
javascriptcssfirefoxinternet-explorer-8internet-explorer-7

clientHeight/clientWidth returning different values on different browsers


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?


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.