clientHeight/clientWidth returning different values on different browsers

Question

Properties document.body.clientHeight and document.body.clientWidth return different values on IE7, IE8 and Firefox:

IE 8:

Answer 1

Element.clientWidth & Element.clientHeight return the height/width of that element's content in addition any applicable padding.

The jQuery implementation of these are: $(target).outerWidth() & $(target).outerHeight()

.clientWidth & .clientHeight are included in the CSSOM View Module specification which is currently in the working draft stage. While modern browsers have a consistent implementation of this specification, to insure consistent performance across legacy platforms, the jQuery implementation should still be used.

Additional information:

• https://developer.mozilla[dot]org/en-US/docs/Web/API/Element.clientWidth
• https://developer.mozilla[dot]org/en-US/docs/Web/API/Element.clientHeight