Make website work in IE compatibility mode

Question

My newly developed website works well in all browsers except IE's compatibility mode.

I have researched and found a number of stack-overflow answers which refer to:-

<meta http-equiv="x-ua-compatible" content="IE=8"> 

or

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

This will force IE to skip the compatibility view but I need my site to be stable in IE compatibility mode.

Answer 1

IE8's compatibility mode makes it render as IE7, so you'd need to use conditional comments which would allow you to add IE7 specific CSS that 'fixes' any bugs you see when the page renders. E.g:-

<!--[if IE 7]>
<style><!-- insert styles here --></style>
<![endif]-->

IE8's various meta tag configurations are listed in this MSDN blog posting, the EDGE configuration you mention makes IE8 render using the most up-to-date engine (I have doubts about how stable this is in the wild).

Alternatively you could use this meta tag to remove the users ability to click the compatibility mode button by forcing it to emulate IE7.

<!--[if IE 8]>
  <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" >
<![endif]-->

You'd still have to fix any visual problems in IE7 with a browser specific CSS, but at least you'd only have to worry about IE7 not IE8.