Stopping, or fixing, IE compatibility mode from totally screwing up the site?

This site is best viewed in a modern browser with JavaScript enabled.

Stopping, or fixing, IE compatibility mode from totally screwing up the site?

mechphisto

We have a new site we're going to be rolling out soon:
http://www.girlscoutsmoheartland.org/drupal
and it looks great in all browsers and tablets... except when you turn on IE 9's compatibility mode, it totally rearranges nearly everything.
I wouldn't think that'd be much of an issue -- who uses compatibility mode?! Except a couple of our test users evidently had it turned on and never knew it. So when they went to the site, they complained of it looking all messed up. So now I wonder, how many other IE users are using compatibility mode and don't know it, because they happened to click that annoying icon in the URL field?

So... is there some way I can make the site not do what it's doing? Some CSS trick or adjustments? I've no idea.

Thanks for any help!
(Oh, and how's it look in IE 10? The the one browser I don't have access to yet. )

mechphisto

Hmmm, I did find a way to insert this into the header:

<?php  

    if (is_null(drupal_get_http_header('X-UA-Compatible'))) {
    drupal_add_http_header('X-UA-Compatible', 'IE=edge,chrome=1');
  }
?>

And now compatibility mode, even when forced with F12 options, isn't messing up the layout any more! (At least, not that I can tell.)
So, I GUESS it's fixed now?
Still open to any other ideas and opinions.

Frank62

I don't know what is easier in your case, but there is an HTML alternative. Put this in the head:

<meta http-equiv="X-UA-Compatible" content="IE=edge">