I had some trouble with CSS on Internet Explorer 8 the other day and wondered why the hell it wasn't working.
After hours of frustration, I disabled compatibility mode by clicking on "Tools" > "Compatibility View" and it just worked.
But I had to disable this for the whole site, without having to teach each user about it. Luckily, there is a meta tag for it!
Add the following tag into the head section of your page and IE will use the specified rendering mode.
<meta http-equiv="X-UA-Compatible" content="IE=8" />
Unsure which version of Internet Explorer supports this, but I know IE8 and IE9 honours this setting.
*update 12/8/2011*
OK, this caused a bit of confusion to me but I figured out why rounded corners (CSS border-radius) wasn't working on IE9.
I shot myself in the foot because I've set the "IE=8" compatibility mode, IE9 will not render rounded borders because IE8 doesn't actually support it.
After reading a post on StackOverflow, I looked up the docs for document compatibility and found a fix. Set the order of compatibility in this format:
<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE" /> Now it'll try IE9 mode first, IE8, then IE7. You can even set IE=EDGE so it'll use the highest mode possible.
*update 21/8/2013*
haha a little over 2 years since the last update, I ran into another issue with this.
IE9 dev tools was spitting out this error:
X-UA-Compatible META tag ignored because document mode is already finalized.
The hell does that mean?
Well apparently it only works if we have it as the VERY FIRST tag in the <head> element, with the exception of <title>. Moving your compatibility meta tag up will fix it.
[ Source ]
[ Fix: IE9 fieldset rounded corners, Defining Document Compatibility, HTML1115: X-UA-Compatible META tag ('IE=9, IE=8, chrome=1') ignored because document mode is already finalized ]
