I am having a big issue trying to disable IE's Compatibility mode.
After much head banging, I have traced the issue down to whether the site is been served as Apache's default config, or as a virtual host.
I know this to be the case as when I access the site with the 'localhost' domain, everything is fine. As soon as I access the very same page via a domain configured in a virtual host - the site renders in Compatibility mode.
Can anyone please shed any light on this crazy issue???
Serving the site as the default host isn't an option.
Dean
Ah-ha!
From here (emphasis mine):
A large number of line-of-business websites are Internet Explorer 7 capable today. In order to preserve compatibility, Internet Explorer 8 ships with smart defaults based on zone evaluation. In the default state, all sites on the public internet display in Internet Explorer 8 Standards mode (Compatibility View off) and all intranet websites display in Internet Explorer 7 Standards mode (Compatibility View on).
...
If you navigate to sites on your local intranet like http://myPortal and http://sharepoint/sites/mySite, Internet Explorer 8 identifies itself with a User Agent string of ‘7’, Version Vector of ‘7’, and displays webpages that trigger standards mode in Internet Explorer 7 Standards mode. This combination allows webpages that worked correctly in Internet Explorer 7 to continue to do so in IE8.
I'm not commenting this. I'm sure this has some good real-world reasons, but I still have the urge to hit my head on the desk.
When a web-site is being served on the local intranet, Internet Explorer will (by default) switch to IE7 compatible mode.
You can use the to disable this "IE7 on the intranet compatibility mode" by including the X-UA-Compatible response header to your page:
HTTP/1.1 200 OK
X-UA-Compatible: IE=8
You can also add the equivlent of an http response head to your page by including a meta http-equiv element to the HEAD> of your document. E.g.:
<!DOCTYPE html>
<html>
<head>
<title>Hello world!</title>
<meta http-equiv="X-UA-Compatible" content="IE=9">
</head>
<body>
</body>
</html>
Note: If you do include the header
| Header | Value |
|------------------|---------|
| X-UA-Compatible | IE=10 |
to your html document, you must add it high enough in the HEAD before something else happens that locks in the document mode - and you're locked into IE7.
Wrong example 1
<!DOCTYPE html>
<meta http-equiv="X-UA-Compatible" content="IE=8">
<html lang="en">
<head>
meta elements belong inside the head element
Wrong example 2
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hello, world!</title>
<link rel="stylesheet" type="text/css" media="all" href="main-73c2257f2d.css" />
<meta http-equiv="X-UA-Compatible" content="IE=8">
The X-UA-Compatible element must appear first in the head; except for title and other meta elements.
The X-UA-Compatible header isn't case sensitive; however, it must appear in the header of the webpage (the HEAD section) before all other elements except for the title element and other meta elements.
Wrong example 3
<!doctype html>
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta http-equiv="X-UA-Compatible" content="IE=10">
The conditionals lock the browser into IE7 mode. Remove them.
Correct
<!doctype html>
<head>
<title>Hello, world!</title>
<meta http-equiv="X-UA-Compatible" content="IE=10">
Related
IE11 Enterprise mode is introduced to emulate the IE8 in IE11 including its user agent and ActiveX but IE conditional statement, but IE11 in Enterprise mode is not supporting the IE conditional statement which should have been supported in IE11 Enterprise mode, as most of us like me coded css using conditional div for IE8 where CSS3 prop are not supported.
The conditional statement is removed from IE10 but in IE10 with IE8 Doc mode this conditional statement is working, see the screenshot below.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN" "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EDGE" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style>
body{font-size:16px}
#colorRed{color:red}
</style>
</head>
<body>
<!--[if IE 8]><div id="colorRed">I am in IE8, cond statement working</div><![endif]-->
<div class="colorGreen">Hello World!</div>
</body>
</html>
Result Expected : It should have displayed the colorRed Div, but it is not in Enterprise Mode.
Ideally the enterprise mode is introduced to emulate everything as in IE8, but this feature is missing , i already went throught this SO post There document mode is discussed but not enterprise mode, here i tested with enterprise mode same result. Any update on this, my IE version is
Thanks in advance for any help.
I suggest trying with the simple conditional <!--[if IE ]> - as suggested in this article I've found a while ago.
I would also suggest that you use virtual machines available for free from modern.ie as IE emulation in more recent versions has always been notoriously unreliable!
I want my application to be opened in
document mode IE-8 for an IE-8 version browser and
document mode IE-9 for an IE-9 version browser.
Otherwise the application will fail to open some tabs.
The <meta> tag to force the browser to open in a particular document mode is like this
<meta http-equiv="X-UA-Compatible" content="IE=9">
If we dont use a <meta> tag, sometimes the browser is opening our application in a different document mode.
I am using html concept.
Please tell me how we can change the document mode properly according to the browser version.
Try IE=Edge
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--[if IE 8]>
<meta http-equiv="X-UA-Compatible" content="IE=8"> or do whatever you want
<![endif]-->
<!--[if IE 9]>
<meta http-equiv="X-UA-Compatible" content="IE=9"> or do whatever you want
<![endif]-->
I'm trying to load my site in IE8 and it keeps reverting back to Quirks Mode and displays the page all funny. I can switch it to IE8 document mode via developer tools and it's fine, but doesn't answer why it keeps reverting to Quirks Mode by itself.
I have set <!DOCTYPE html> so it shouldn't be doing it. The top of the page includes this, as generated by the CMS:
(ignore this line, it's here to show the blank lines in the source code)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--[if IE 7]> <html class="ie7 no-js" lang="en"> <![endif]-->
<!--[if lte IE 8]> <html class="ie8 no-js" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--> <html class="not-ie no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
Any ideas? Thanks!
According to the w3c validator you have whitespace before your doctype. That would be enough to throw IE into quirks mode.
Non-space characters found without seeing a doctype first. Expected .
See this for a possible solution
I believe IE defaults to Quirks unless you force it to use standards. I use this to force standards in IE...
<!DOCTYPE html>
The doctype must be exactly as above to force standards to work (so far so good).
<html>
<head>
The next lines must be the first in the head tag, or they are ignored.
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<meta http-equiv="X-UA-Compatible" content="IE=8" />
The first line forces standards for IE versions that understand "edge" - no matter what version, any version above 9 should understand this line to be instructing it to display standards.
Since IE9 does not understand "edge", the second line forces IE9 to display in standards.
Since IE8 does not understand content="IE=9", it skips this and moves on to the next line, which it does understand, and which forces it to display in standards.
I tested all of these with spaces and hard returns above the doctype and they worked fine even with spaces and returns.
I think you can place another statement below the IE8 statement for IE7, but I don't want to swear to this.
<meta http-equiv="X-UA-Compatible" content="IE=9" >
the above line of code forces the browser to make
Document mode to IE 9 standard and
Browser mode to IE 9 Compatiblity mode
How can i make Document mode to IE 9 standard and browser mode to IE 9 mode
this works for me..
<!DOCTYPE html>
<html>
<head>
<title>title</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
Do you have any other links or scripts above your X-UA-Compatible meta tag in your <head>? If so this might be causing the problem.
Also make sure to check the compatibility settings in your browser itself by going to:
Tools --> Compatability View Settings
There are several possible explanations, such as HTTP headers overriding the meta tag, domain name being blacklisted by Microsoft, or your local admin having forced IE to Compatibility mode. For a description of some possibilities and possible cures, check out IE8 and IE9 Complications in “Activating Browser Modes with Doctype”.
Ok so sorry for being blunt here but I have been developing on IE 8 and IE9 for the past 2 years and can't seem to get this right. I work at abhor company and develop for their website. For some reason IE8 or IE9 defaults to a lower document mode like ie7 or ie8. I have tried everything...
1) put HTML 5 doctype and nothing else. According to Microsoft this should be enough
2) put html5 doctype and put x-ua-compatible meta tag first in the page under title and set to either edge or IE8 or IE9 respectively.
My page looks like this
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7">
<![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt- ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <! [endif]-->
<!--[if gt IE 8]> <html class="no-js"> <! [endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
It's really getting frustrating because everything I read says it should work. Microsoft claims this will work or even just settings HTML 5 doctype will work. I've heard to set a http header to fix but honestly, is Microsoft serious? I find it hard to believe that developers need tot change their apache settings to add a http header to Make page render I'm standards mode
Can someone please help me here? What am I missing??? I'm really beginning to hate Microsoft Even more!!!!!
UPDATE::
I recently discovered that my company has the "show intranet sites in compatibility view" checked off and it looks l like if i uncheck it then it will work fine. However, that is not the solution! Everywhere i read i see that if you see the X-UA-compatible meta tag or http header it should take precedence. Well this is a complete lie. Does anyone else have an answer?? I understand that external users will be fine however my business is testing this and they are asking questions because they are internal and its hard to convince them and to tell them to uncheck the box. It doesnt give them a great feeling. Also, i cant have the desktop engineering team remove that because it was put in place because older applications internally are not written to support IE8,9 so they need this.
Any help is appreciated. thanks!
Thanks
Our intranet is also locked down with Compatibility View being used for all Intranet sites and uses IE 8 as they are all Windows XP.
I found that once IE 8 started processing the standard boiler plate conditional comments (to determine which class to attach to the <html> tag) then it was game over: IE decided at that point it was running in Compatibilty Mode (IE 7) and nothing I could do would recover the situation.
I found that by placing the <meta> tag immediately after the <!DOCTYPE> tag it all worked exactly as expected:
<!DOCTYPE HTML>
<meta http-equiv="x-ua-compatible" content="IE=Edge">
To my eyes this doesn't seem very "standard" but it works. I'd love any alternative methods of doing this where the <meta> tag could be placed into the <head> as I tried for hours to do.
The 5th and 6th line of your code are in error and cause, as #JaredFarrish remarks in a comment, the page to display as blank on IE.
At the end of the 5th line, remove spaces from
<! [endif]-->
At the end of the 6th line, change
<!--<! [endif]-->
to
<![endif]-->
On your actual page, there is probably something in the code later that stops the skipping that the malformed construct causes on IE.
It’s still unclear what puts IE into Quirks Mode. More information is needed to address this issue. It could even depend on the domain in which the page is, so disclosing the URL may help. For generalities, see IE8 and IE9 Complications (in setting browser mode).
Ralph Bacon's answer just solve the issue for me. There is nothing wrong with the html5 boilerplate we are using.
If you're intranet is using compatibility mode, then you should place this
<meta http-equiv="X-UA-Compatible" content="IE=edge">
after the
<!DOCTYPE HTML>
So overall, your header would look like this:
<!DOCTYPE html>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang=""> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang=""> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang=""> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js" lang="en">
<!--<![endif]-->