clientHeight/clientWidth returning different values on different browsers

Question

The properties: document.body.clientHeight, 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 exits? Are there any equivalent properties that are consistent across different browsers (IE8, IE7, FireFox)

Answer 1

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

Answer 2

It may be caused by IE's box model bug. To fix this, you can use the Box Model Hack.

Steve

Answer 3

Paul A is right about why the discrepancy exists but the solution offered by Ngm is wrong (in the sense of JQuery).

The equivalent of clientHeight and clientWidth in jquery (1.3) is

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

Answer 4

The equivalent of offsetHeight and offsetWidth in jQuery is $(window).width(), $(window).height() It's not the clientHeight and clientWidth

Answer 5

i had a similar problem - firefox returned the correct value of obj.clientHeight but ie did not- it returned 0. I changed it to obj.offsetHeight and it worked. Seems there is some state that ie has for clientheight - that makes it iffy...

Answer 6

The body element takes the available width, which is usually your browser viewport. As such, it will be different dimensions cross browser due to browser chrome borders, scrollbars, vertical space being take up by menus and whatnot...

The fact that the heights also vary, also tells me you set the body/html height to 100% through css since the height is usually dependant on elements inside the body..

Unless you set the width of the body element to a fixed value through css or it's style property, it's dimensions will as a rule, always vary cross browsers/versions and perhaps even depending on plugins you installed for the browser. Constant values in such a case is more an exception to the rule...

When you invoke .clientWidth on other elements that do not take the automatic width of the browser viewport, it will always return the elements 'width' + 'padding'. So a div with width 200 and a padding of 20 will have clientWidth = 240 (20 padding left and right).

The main reason however, why one would invoke clientWidth, is exactly due to possible expected discrepancies in results. If you know you will get a constant width and the value is known, then invoking clientWidth is redundant...