Asp.net web app issue with IE10 Compatibility mode

Question

I have an asp.net app with a dropdownlist control of larger width and vertically centered aligned text.

Yesterday my dropdownlist control suddently lost it's css width/alignment properties displaying incorrectly at the browser (IE 10).

After hours searching the problem, I noticed it was because I had accidentaly hit the "compatibility mode" button at the address bar (next to the url).

details on my post at: Vertically align text in a asp.net dropdown list control.

After hitting back the compatibility mode button it starts working well back again.

Since that happened to me, I wondered it could happen to end users to and so display it incorrectly to them as well.

Does anyone know how to avoid that and create a dropdownlist/web app that doesn't unformat if the user accidentally clicks that button?

By the way, I also used the IE dev tools to test my page on older browser versions and noticed that it works well on IE 9 and 8 as well, but the dropdownlist messes up on IE7.

Thanks!

Answer 1

Your best option is to add a conditional css reference which kicks in if the IE browser version is less than a given amount. For example if you add a new css file which contains styles specific to IE7. These commented out sections are IE hacks. This sytle sheet will not take effect unless the browser is IE7.

 <!--[if IE 7]>
      <link rel="stylesheet" type="text/css" href="/styles/main.IE7.css"" />
    <![endif]-->

Then you need to adjust your styles in this style sheet to suit IE7.

Also sometimes IE is set to display intranet sites in compatibility mode. See this for adding a setting in the web.config which will prevent this X-UA-Compatible is set to IE=edge, but it still doesn't stop Compatibility Mode