Question

I have encountered a problem today when i imeplement a correction in our project.

What i found is that the outerWidth for h2 in IE 7 is shorter than in IE8 (FF, Chrome etc).

Here is my code:

var h2width = $('.test h2').outerWidth(true)

h2width is 135px in IE8 and 78px in IE7.

Do you have any ideas for that?

Thanks in advance!

Edit :

For prevent this problem, i have added the code for differenciate the browsers.

if ($.browser.msie && $.browser.version.substr(0, 1) <= 7) {
var h2width = $('.test h2').outerWidth(true) + 57;
} else {
var h2width = $('.test h2').outerWidth(true);
}

Answer 1

Browsers render HTML differently so this isn´t that strange.
Use Firebug or other development tool to view the actual size of your h2 tag. They are most likely different.

Also notice that your selector $('.test h2') returns a collection of matched elements.