First Encounter with IE8

If you are like me, you have been just ignoring IE8 all this time. What you didn't know is that, chances are, your app(or javascript library) doesn't work on it. Sure, I had heard about how it breaks sites all over the place and they worked around it by using an database of sites for which they override the browser to use the IE7 compatibility mode. That's right, before rendering any web page, IE8 actually makes a request back to Microsoft headquarters to find out whether it should render the page in regular mode, or IE7 compatibility mode. Wow, kill me now...

Anyway, so I didn't think too much of that. Until today, when I had the pleasure of "porting" some code to work in IE8. To be fair, this app hasn't been tested much on IE period, before today. So, here's me dutifully reporting my findings.

First, of all, if you are using a non-core(unlike jQuery, prototype, mootools, etc., which would be core) third party Javascript library, it probably does not work with IE8. The Google Visualization API is one example. Because of this, we ended up explicitly telling it to use IE7 compat mode. The way you do this is to put this meta tag inside of your element:

<meta http-equiv="X-UA-Compatible" content="IE=7" />

Second, make sure you specify the doctype. We used html 4.01 strict. If you don't specify it, standard things like transparencies won't work. This should be obvious.

Third, even if you do all the right things, transparencies still may not work... See this gem to read all about it. In my situation, I had some semi-transparent pngs inside some div that had its opacity value set. It turns out that in IE8, this causes the png transparency to not work at all. You could fix it the hard way in javascript as described in Bb's article, or you could just use IE7 compat mode, which is what I did, sigh...

One more thing that was interesting was that forgetting to write var in front of a new variable caused an error to be throw. That looks a lot like strict mode behavior. I'll have to take a second look at this to verify, but it is worth mentioning.

Oh, almost forgot: on the positive side, MS did a great job with the built-in developer tool, which opens in a separate window via F12. I used it to inspect the DOM and change css attributes on the fly. I am sure it can do more that I haven't tried. Kudos to the IE team for that.

blog comments powered by Disqus