So, Internet Explorer 8 was just officially released. First off, I was really impressed with the download speeds. In the past downloading Day 0 releases from Microsoft have always been a bit problematic for me—because of the sheer volume of download requests. However, my download experience was very fast. Kudos Microsoft.
However, one of my main gripes from RC1 is still present—Compatibility view doesn't work consistently. If you're not aware, the following meta tag is supposed to force IE8 to run in Compatibility view:
However, I'm still noticing issues that are inconsistent between adding this to the HTML and a user manually activating Compatibility View for a site.
The quickest way for me to illustrate this is to show you some screenshots.
In our application, we have a table that has collapsible rows. This is what the table looks like in every browser but IE8:
If you click on the 
icon, the row expands. This functionality has been working fine in Firefox, IE, Chrome, Safari in every major version.
Now, if you look at the grid in IE8 it looks like this:
It may not be immediately obvious as to the problem, but the root cause is how IE8 is handling the rowspan attribute of a table cell. In IE8 it's ignoring rows that aren't visible—therefore causing a corruption to the display. So the behavior in IE8 is quite a bit different.
So, let's see what happens if I turn on Compatibility view for this site (click on the 
icon next to the address bar, or go to Tools > Compatibility View.) Now the table appears as I'd expect:
So great, IE8 can render the grid like we want—as long as the user turns on Compatibility View manually. But what users are going to think to do that? Probably none, but the most power users.
Fortunately, the IE team thought of this in advanced and implemented the X-UA-Compatible meta tag to give us a way to force a page to Compatibility View. So, now lets turn of Compatibility View and try forcing the mode by adding this meta tag to our code:
So, if everything works at you'd expect we should see everything render exactly as it did above. However, we get something quite different:
If you're wondering where the other rows went, look at the scrollbars on the side. What happens is instead of rendering each row the height that you'd expect, IE8 is rendering the height of each row the height of all the collapsed rows.
So, something is definitely amiss. I'm not sure what the difference is internal between using the meta tag and physically enabling Compatibility View for a site, but it's obvious from this example that they are not exactly the same.
I'm not sure what other issues might turn up from this, but it's important to keep in mind that the meta tag is not quite the fix that Microsoft promised.
So, if you're relying on the meta tag to resolve issues into you can fully test and fix issues on your site, just be aware that it might not be working as well as you'd like.
PS – I did test using <meta http-equiv="X-UA-Compatible" content="IE=7" /> as well, but that made no noticeable difference.
38 Comments
Comments for this entry have been disabled.