Common JavaScript/jQuery bugs in IE6-7-8
I always write my JavaScript scripts in Firefox, I test them in Firefox and then I move to Opera and Chrome/Safari. After my script works in all above browsers I try to make it work in IE at least version 8 (but sometimes also 7 and even 6).
Usually there are none to very little changes needed to port a script from Firefox to Opera & Chrome/Safari. Especially when I use jQuery library, but IE… that’s a different story.
Seems that IE doesn’t like variables without “var” word, so always change:
str = 'Hello World';
into
var str= 'Hello World';
IE doesn’t like uncompleted HTML code. Other browsers try to understand what should it be, but not IE. Once I made a small but I wrote a code like this:
$('body').append(
'<div><div class="background"></div>' +
'<input type="hidden" class="parent" value="' + parent + '"></div>' +
'</div>');
It worked just fine in Firefox, Opera and Safari/Chrome, but not in IE. No bug was shown, but the element was not created.
The solution? I used 1 “
” which I should not. The correct code is:
$('body').append(
'<div><div class="background"></div>' +
'<input type="hidden" class="parent" value="' + parent + '">' +
'</div>');
This stupid mistake cost me some unnecessary problems. If you have similar problem (IE doesn’t create elements) please check your generated HTML. It might have a bug somewhere.
January 29th, 2012 at 12:48 am
var width=$(‘#something’).width(); //230 firefox
var width=$(‘#something’).width(); //230px IE
Solution
var width=parseInt($(‘#something’).width()); //230 both