(510) 523-7312 info@mjswebsolutions.com
Blog

CSS Compatibility Mode Fix for Internet Explorer 8

My recent post about IE8 has launched it’s ugly head.

A client of ours contacted us to let us know after they downloaded the new Internet Explorer 8 there site looked messed up.

Knowing this was going to be a problem, Microsoft created a button called ‘Compatibility View‘ so users could view websites in the older version of their browser.

But this was not a work around for our client.

Instead of fixing (or hacking) all the code on the website I added the following code recommended by Microsoft:

<html>
<head>
<!-- Mimic Internet Explorer 7 -->
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" >
<title>My Web Page</title>
</head>
<body>
<p>Content goes here.</p>
</body>
</html>

It worked!

This is truly a work around – a Microsoft work around. Microsoft knew full well that their new browser couldn’t view perfectly good standard coded websites, so they had to come up with a way to view websites as if you were using their old browser.

What a joke. It’s no wonder why Microsoft is losing market share to Firefox and Apple.

Related Posts

This Post Has 41 Comments

  1. Ya baby!! You are the man! I’m having the same issue with my clients site and you solved my problem with a 2 second google search.

    Thank you!!

    Reply

  2. Excellent!

    Glad to hear the code helped you out. I knew others would have the same issue.

    Thanks for letting me know you found my post via a Google search. I titled my post hoping people would find it easily. I initially had to do some deep searching on MSDN to find this fix.

    Reply

  5. Thanks for writing this article Michael, I’d had the same problem on my site, although visibly it looked fine in IE8.
    It’s a shame that Microsoft insist on new technologies that make everyone else look bad.
    After browsing around I found facebook were using the same work around.

    Reply

  6. Hi Cole.

    You’re welcome. I’m glad you found the article helpful. I knew there would be others who would need this information. Amazing how Microsoft buried this ‘hack’.

    Interesting about Facebook.

    Thanks for you comments.

    Reply

  7. Had the same problem on my site. After a few unsucessful attempts to fix the problem, I googled the fix and came across this article. The fix works great. Thanks

    Reply

  10. Okay… this doesnt seem to work for me… not quite sure why… I added the code and all it did was take away the compatability icon away at the top of the page, but it still looks the same… It looks great on all other major browsers (Firefox, Safari, Chrome, and Opera )… However when I hit the compatability view icon it works perfectly… why the difference in behavior

    Reply

  11. Hi Chris.

    Not sure why it’s not working for you. I know it takes away the compatibility icon, but it should also emulate IE7. Please list your URL and maybe I can take a look at it.

    Reply

  14. Thanks for the foot work Michael. I wish Microsoft would get it together with their browser. I personally stopped using IE a long time ago, however when developing websites you have to develop for the masses. The masses still use IE.

    Reply

  15. I my god. What a post. You are so wrong about this part:

    “Microsoft knew full well that their new browser couldn’t view perfectly good standard coded websites”

    Internet Explorer 8 is much better with good standard coded websites. You’re code is just s*** and not standard at all. My sites works perfectly in IE8 with good standard codes, only ie7 and ie6 needed some fixes.

    Reply

  16. Actually you’ve developed your site for IE7, using some of the non-compatible css features. IE8 doesn’t support all of IE7’s non-compatible features.

    Reply

  17. Hey Michael!!! thank you so much for informing us all!! this really helped me as I was checking my website in all popular browsers and noticed explorer was displaying my content differently but in compatibility mode it was great! thank you for the code! it took me 1min at the most to find your post! =D thanks!!

    Reply

  18. This seems to be a great fix for most but it doesn’t work for forum posts. On my forum, whenever I (and some members) try to write a long post, the screen bounces back up and it’s impossible to see what you’re typing

    Reply

  19. i am a firefox user more than an internet explorer user but it seems that Internet explorer 8 is very stable and it its loading time for webpages is faster too.

    Reply

  20. Michael, great tip – thanks for sharing.

    This definitely works better than IE8 Compatibility mode when testing IE7 specific css hacks (e.g. html>body).

    Reply

  24. Ok it has been a while since you posted this.
    I seem to be having severe problems with IE8 and compatibility mode. I have tried all of the meta tags available and still no hope of solving the problem.
    The last thing that I did was set the X-UA-Compatible to IE=8;FF=3;OtherUA=4
    so far that has been the best, but I have a .NET UpdatePanel and some buttons that trigger AsyncPostBacks that cause my CSS to go all goofy at random.
    Is there a way to force the browser to no use the compatibility mode button?

    Reply

  26. I know this post is reaching almost 2 yrs old, but it help me out drastically. Worked for nearly a day on the CSS file due to the IE rendering and the meta tag that you have posted did the trick. I just finished looking at a MS blog (before clicking onto your page) and it didn’t lay the meta tag out very clearly like you did.

    Thank you so much.

    Reply

  28. Thank you for this. It saved me today. However, expanding on this, according to the MS site, you can set the code to call the latest version of IE by changing the code to:

    Notice the word ‘edge’. That makes the code call the latest and greatest version of IE you have on hand.

    I do have another question, though: does that meta code snippet completely replace a standards compliant one like:

    If it does, it will seem to corrupt the benefits of the second one. Also, it seems that the code shuts down the use of compatibility mode in the browser. Sometimes it comes back on its own on the next site visited, sometimes not.

    Not a perfect system.

    Reply

  33. I haven’t tried it yet. One problem Ive encounter in css/ie is the nth-child thing.. hope this is really a workaround for this..

    Reply

  34. I tried as you wrote in your solution but that is not working in compatible mode of IE-7 or IE-8..please tell me why that is not working..
    I am trying to solve my compatible mode solution from last one week but not able to find..

    Reply

    1. You may need to add the word edge as others posts have mentioned. See my link to Microsoft’s website. You can specify which browser to emulate. “Specify IE=5, IE=7, IE=8 or IE=9 to select one of those compatibility modes. You can also specify IE=edge to tell Internet Explorer to use the highest mode available.”

      Reply

  35. It was just amazing, thank you so much for this awesome and beautiful code, with a simple refresh its solved 100’s of issues.

    God bless you my friend.. !!

    Reply

  36. Wow, Michael, U r gr8t… i dono wat to do with tht issues.. i was altering my whole css for this.. but in a single line u have cleared the problem.. So gr8t and time saving,..

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

Back To Top
Search