For most of the day I’ve been working on making sure my company’s web application will work on both FireFox and Internet Explorer. I developed it for FireFox, and it works great. Internet Explorer, on the other hand, is totally broken. Obviously my first reaction is to curse the non standard IE browser, rant and rave at our customers for not keeping up-to-date with browser technology, and essentially talk myself right out of a job. We develop a web application, so the bottom line is we have to be compatible with whatever people are using.
Anyone whose googled for common cross browser incompatibilities has probably been pretty upset with the ratio of helpful solutions to complaints about IE. When I hit a problem, I usually have to scroll through weeks of flamewars until I find a solution other then “IE sucks, don’t use it”. However, when I do find that solution, its usually from somebody who knows what they are doing and they explain the problem and why their solution is correct. They teach me something new each time.
So before bitching at IE, lets step back and look at MY code for a minute. I have some typical problems with jQuery and Javascript which don’t pose much of a challenge,
$('myCheckbox').change(myHandler);
; padding: 5px; overflow: auto; color: rgb(51, 51, 51); background-color: rgb(238, 238, 238); line-height: 14px; width: 100%;font-family:Andale Mono,Lucida Console,Monaco,fixed,monospace;font-size:12px;">(.*?)Doesn’t work in IE. You have to use jQuery’s .click() event instead, which works across browsers.
var list = [];
for(item in list) {}
; padding: 5px; overflow: auto; color: rgb(51, 51, 51); background-color: rgb(238, 238, 238); line-height: 14px; width: 100%;font-family:Andale Mono,Lucida Console,Monaco,fixed,monospace;font-size:12px;">(.*?)Breaks in IE but works in FireFox. This requires me to look at the MSDN’s JScript documentation for the for..in loop. It doesn’t say anything, but apparently you need to declare ‘item’ or IE won’t let you assign that first object of list. The correct code is:
for(var item in list) {}
; padding: 5px; overflow: auto; color: rgb(51, 51, 51); background-color: rgb(238, 238, 238); line-height: 14px; width: 100%;font-family:Andale Mono,Lucida Console,Monaco,fixed,monospace;font-size:12px;">(.*?)For all of you laughing at me, my only defense is having worked so much with PHP and Javascript recently I tend to not declare my variables(smell)… so IE is requiring me to clean up my code(pro).
$.html() is by far and away my favorite, and probably the most widely disputed. It relies on innerHTML. innerHTML is
not a standard, so I can’t really get mad at IE for sucking at it. I was parsing a div with a regex in FF and things were great:<li id="loc123">First location</li>
; padding: 5px; overflow: auto; color: rgb(51, 51, 51); background-color: rgb(238, 238, 238); line-height: 14px; width: 100%;font-family:Andale Mono,Lucida Console,Monaco,fixed,monospace;font-size:12px;">(.*?)But that same .html() function gives different output in IE
<LI ID=loc123>First location</LI>
; padding: 5px; overflow: auto; color: rgb(51, 51, 51); background-color: rgb(238, 238, 238); line-height: 14px; width: 100%;font-family:Andale Mono,Lucida Console,Monaco,fixed,monospace;font-size:12px;">(.*?)That drove me pretty nuts. But instead of getting angry, I found this little gem. innerXHTML innerXHTML work great in both FireFox and IE, and I also get the same well formed XML for parsing under both browsers.
I also had some structural issues (mainly the amount of ajax I’m using) that just didn’t work in IE, even though they are fast in FireFox. After the usual bitching, I have admitted that I was using way to much AJAX to begin with and, honestly, I had two closures in a loop and was creating a huge memory leak.
Although this app ran well under FireFox, the pain in the ass that is IE really helped me improve the whole thing.
