How can I disable the Compatibility Mode button in IE9?
I cannot disable the IE Compatibility mode button in IE9.
M开发者_开发知识库y head and doctype look like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--[if lte IE 8]>
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-en" xml:lang="en-en" class="ie8">
<![endif]-->
<!--[if IE 9]>
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-en" xml:lang="en-en" class="ie9">
<![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-en" xml:lang="en-en">
<!--<![endif]-->
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="description" content="meta content here" />
</head>
<body>
<!-- page content here //-->
</body>
</html>
How do I disable the compatibility mode button in IE9?
I thought I did my research. I applied every kind of fallback solution to display everything fine in every IE from 7 to 9 and up.
The client is complaining about the compatibility mode that when activated, it messes up the layout. Is there any way to disable that button?
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
Chrome frame has been discontinued by Google as of Jan 2014 so the chrome=1 part is not required
<meta http-equiv="X-UA-Compatible" content="IE=edge">
The "edge" forces standards mode (or latest rendering engine) in IE and the "chrome" is for Chrome Frame.
Further info available here:
- Which X-UA-Compatible mode should I be using?
- Beyond DOCTYPE: Web Standards, Forward Compatibility, and IE8
- 20 Snippets You should be using from Html5 Boilerplate
I was using conditional comments at the top of the page to embed an ie class based on version. (eg:)
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
As a result, even though I was setting the X-UA-Compatible meta tag, the Compatability Mode button was still being shown in IE.
To fix, I had to move the conditional comments to the bottom of the page and use JS to apply the ie classes. The Compatibility button is no longer shown in IE when viewing my site.
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=8; IE=9; IE=10; IE=EDGE; chrome=1">
<head>
<body>
<!-- ..Other content... -->
<script type="text/javascript">
window.flagAsIE = function(version) {
var cls = document.body.parentElement.getAttribute('class');
document.body.parentElement.setAttribute('class', "ie ie" + version + " " + cls);
};
</script>
<!--[if lt IE 7 ]><script type='text/javascript'>flagAsIE('6');</script><![endif]-->
<!--[if IE 7 ]><script type='text/javascript'>flagAsIE('7');</script><![endif]-->
</body>
</html>
Here's the answer:
http://blogs.msdn.com/b/jonbox/archive/2011/03/27/removing-the-ie9-compatibility-button-and-html1115-warning.aspx
Change the order of your meta tags.
I found that it was the conditional comments that were causing the button to appear. Removing these and using feature detection instead to add my html classes has solved this problem. No amount of tinkering with the X-UA-Compatible stuff would remove the button.
I've used this set of has.js detects:
if (has("css-border-radius") && !has("input-attr-placeholder")) {
html.className += ' ie9';
}
if (!has("css-border-radius") && !has("input-attr-placeholder")) {
html.className += ' lt-ie9';
}
if (!has("css-box-sizing")) {
html.className += ' ie7';
}
The Problem is that somewhere in your js code you are using browser sniffing code like document.all, window.ActiveXObject, navigatror.userAgent, attachEvent, detachEvent etc.
Replace everything with feature detection code using jquery.support and the button will disapear.
加载中,请稍侯......
精彩评论