Why are IE and Firefox returning different overflo

Question

I have a div with a fixed size of 100px. scrollWidth and scrollHeight works fine if the text in the div is normal (no word is long enough to fill the one row entirely). However, if there is any text with one word rendering wider than the 100px it will cause a problem.

Let's say the text is like "ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890": then Firefox returns the wrong scrollWidth (100 in this case, which is same as the actual width even though the div is overflowing). However, IE is giving the correct scrollWidth (180 in this case).

Please help me get the correct scrollWidth in Firefox. Sorry if my question looks vague.

Answer 1

I had this same problem and feel that this is a bug in Firefox not IE, as per w3 scrollwidth of an element is (padding-right + padding-left + content width) including the overflow. The following fiddle gives the correct value in IE 8 and Chrome but in Firefox it doesn't

http://jsfiddle.net/vdua/Fungh/16/

Answer 2

Make sure that your div has the overflow:hidden or overflow:auto style set. If it's overflow:visible (the default), then FF won't calculate a larger scrollWidth as there's nothing to scroll (the text is all rendered).

The behavior you observed with IE is actually due to a bug in that browser's implementation of overflow:visible.