Internet Explorer Styling – Quick Fix
August 29th, 2012
I have been wrestling with Internet Explorer for years now but never so much as when I started developing for WordPress. For example, I was up until 2am last night looking for the best way to force IE to display CSS properly. I looked into browser hacks, conditional tags, .js libraries, emulators and more. Everything I tried had me hitting walls of PITA development I just don’t have the time to deal with.
Luckily though, in my research, I stumbled upon one little comment on Stack Overflow that absolutely made my night.
This is a small, often overlooked little tag in the head of most web pages. In my case, the full tag was:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
This teeny little snippet was forcing my site to emulate IE7 which of course, can’t deal with CSS3 or anything mildly resembling it. So, all I had to do to fix it was replace the above code with this:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, IE=9">
And most of the CSS issues were happily resolved. Not everything was fixed though since even the latest version of IE doesn’t support some CSS, such as text-shadow (which IE does have some not very efficient filters for), but enough was fixed to make me happy.
So, if you find that your site isn’t rendering in Internet Explorer properly then you might want to check for this issue. It’s an easy fix that goes a long way towards getting your site cross-browser compatible.