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!
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