I'm working on a type of 'spotlight' plugin that puts four boxes around a target element (top, left, bottom, and right). Thus, the boxes need to be positioned and sized programmatically.
I've come across an instance where $(document).width() returns a consistent value in Firefox, Chrome, IE7, and IE8, but not in IE9—the value in IE9 is 17px greater than the others. However, if I switch it up to $('BODY').width() the value becomes consistent in ALL browsers. Unfortunately, I can't post a fiddle of this because I can't replicate it outside of the development environment.
What might be causing this inconsistency between the body and document width...and ONLY in IE9 (remember, IE7/8 aren't affected)? I've verified standards mode and the padding/margins are zeroed out for HTML/BODY.
I think that the extra 17px you experience is the y scrollbar, which you don't normally have in jsfiddle, and counts towards the document but not the body.
Yes this is due to browsers not implementing the box model / standards consistently. Theres not much you can do about it except work arround it.