Yesterday someone I know complained that the layout of our site (leadingcourses.com) was broken in Internet Explorer 9.
Of course my own IE was showing no problems until I was playing with the compatibility view.
The button is so close to the refresh button, it happens more than once people click it by accident, breaking the fine layout of a site to something IE7 alike
I was reading some blogs and found that everything was in place already to hide the icon.
But it was still there.
There was no way to get rid of the compatibility view icon. It just would not go away..
Until I remembered I was using the following html tag:
<!DOCTYPE html> <!--[if gt IE 8]><!--><html lang="en"><!--<![endif]--> <!--[if IE 7]><html lang="en" class="ie7"> <![endif]--> <!--[if IE 8]><html lang="en" class="ie8"> <![endif]--> <head> ... <title>...</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
This is very handy as you just say
.ie7 header {
background-color: #000;
}
.ie8 header {
background-color: #f00;
}
...
So I have to replace this by doing:
header {
background-color: #f00\9; /* IE8 and lower*/
*background-color: #000; /* IE7 and lower*/
}
...
Reducing the html to
<!DOCTYPE html> <html lang="en"> <head> ... <title>...</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
This fixed the issue for me, I hope it helps.