We don’t need to tell you how much we hate IE, but it’s important a site is still compatible with this browser monster. That’s easier said than done when users (accidentally) have their browser stuck in compatibility mode. Here’s how to detect and fix that.
Some people want to argue about doing server-side detecting of the “User-Agent” string and making changes to the served page. Let’s skip all that and talk about a much simpler processes to try first.
First off, let’s get the site working in IE (with compatibility mode off). Often you’ll find layout issues. Fix those with an ie.css
file and an IE condition. In other words:
<!--[if IE]><link rel="stylesheet" type="text/css" href="ie.css"><![endif]-->
That basically says, if the browser is IE (any version) load the stylesheet, “ie.css.”
In ie.css
, you can put IE-specific style changes to fix layout issues. Once that’s done, it’s just a matter of getting the browser NOT to use compatibility mode.
To do this, add the following META tag inside your <HEAD>:
<meta http-equiv="X-UA-Compatible" content="IE=100" />
What that says is, if you’re in compatibility mode, render this page as if you weren’t.
Pretty cool, hu? Thanks for the heads up, CF Elements!