I work with a company that hosts a fair number of websites in a Perl ASP backend and we're trying to make sure our client's websites don't display the compatibility view button on the address bar of Internet Explorer unless absolutely necessary.
I've found one thing that triggers the button right away, which is including a javascript (in our case Jquery) file in the head section before the title and meta tags. However it's difficult to determine what makes IE think it should display the button beyond that (I'm testing in IE 10).
In testing one site that had the button displaying, I copied the page source code into an html file and tried viewing it locally. With identical source code, the live page displays the button while the local copy does not. Does Microsoft maybe do something similar to Google where a webcrawler indexes sites that might need compatibility view?
I find it's hard to get a straight answers as to who is really in control of this button and what aspects of a webpage contribute to the issue. Any help is appreciated.
IE will display the Compatibility View button unless you hide it by specifying the document mode using X-UA-Compatible via a HTTP response header or META tag.
Try using this document compatibility mode meta tag:
<meta http-equiv="X-UA-Compatible" content="IE=edge">
...that forces IE to use its latest standards mode.
Related
I have been reading up about document type emulating and compatibility mode in IE and have to say its quite a bit to get one's head around.
I have developed an App with Bootstrap 3 and Ember rendering a few pages controlled through a menu.
I tested this in all browsers, Webkit, Moz, and IE and all seemed perfect. I work in a large corporate, so when I decided to test it on some of my colleagues' computers, on IE, I got a blank page. Now I found that very strange because they were all running IE10 or IE11, although there is the odd IE9. I couldnt understand it because it renders perfectly on my IE.
So anyway, I started hitting F12 on their browsers and realised that many of them had IE7 emulating even though they were running IE10 or 11.
I read a bit about this issue, and I found the following:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9" />
So I proceeded to add this line to my page so it is as follow:
<!DOCTYPE html>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9" />
Now my question is this: Am I correct in assuming that if there was some sort of group policy set when using IE at work, that this workaround would solve the issue?
I will do some testing tomorrow morning, but just wanted to know if that is along the right lines?
Many people at work use Chrome and Firefox or whatever they want to, but there are obviously quite a few that use IE.
Take note that there must be a reason why the current group policy is set to enable compatibility mode (some other intranet app maybe) and that other app might stop working (or render badly) if you disabled it. If the admin have configured it in a way where that there's a Compatibility View list then you're in luck because all you need to do is not include your web app's URL into that list.
https://msdn.microsoft.com/en-us/library/ie/gg622935(v=vs.85).aspx
As for the document mode, I suggest for you to use this instead:
<meta http-equiv="X-UA-Compatible" content="IE=edge">
Setting the version to 'IE=edge' tells Internet Explorer to use the
latest engine to render the page and execute JavaScript.
https://www.modern.ie/en-us/performance/how-to-use-x-ua-compatible
The only reason you want to "IE=EmulateIE9" is that your app is targeting the legacy document mode which in your case it isn't since you're using the latest web frameworks out there. I assume you want the best UI experience for your users.
I understand that in your case the IE versions vary and that some might not support "IE=edge". It will be just OK because it will fallback to the highest supported document mode. For example, IE8 with IE=9, IE=Edge, or IE=EmulateIE9 results in IE8 mode.
https://msdn.microsoft.com/en-us/library/ff405771(v=vs.85).aspx
IE uses different security zones for different types of content. Stuff from the Internet is loaded in the Internet zone. Stuff from the local network is loaded in the Intranet zone. If you go through Internet Options, you can see that there are different security settings applied to the various zones.
If you're deploying the app through the network, then your app is likely loading the app in the Intranet zone (right click the page and then choose Properties to confirm).
By default, IE loads intranet pages in compatibility view, which is the same as using EmulateIE7 as the content value for the x-ua-compatible element. This means that, absent additional tagging/changes, your app is being treated as if it were being viewed in IE7.
If you need a specific document mode, you should be able to specify that mode directly in the content value, e.g, content="ie=9". If that doesn't help, then try adding an MotW to the page, so that the page is loaded in the Internet zone. In turn, this should allow the x-ua-compatible setting to take effect.
You can also change the Compatibility View Settings, provided they're not disabled through GPO, so that Intranet pages aren't automatically loaded in compatibility view.
Hope this helps...
-- Lance
I've been working on a PHP project for University, and as I'm rubbish at PHP I've left the design very simple so I can concentrate on the programming side of things. Now the programming is working I'm working on the design. The site looks fine in Chrome and other webkit browsers but in IE9 it looks awful. The main problems are...
1 - Background image expands the div to the full image size, whereas in webkit is only fills the div size.
2 - Content is not centred, instead it is floated left.
Does anyone know any scripts/hacks I can use to get IE to perform like every other browser? The only thing I'm using at the minute is Modernizr.
You can have a look at the site here if it helps - http://newmedia.leeds.ac.uk/ug10/cs10cwh/pod/index.php.
Modernizr can help, especially if you're using newer things like html5 and css3. Another thing that can help is boilerplate code, I personally like the html5reset.
One particular thing from that is going to help you a lot: if I look at your site in IE it says it goes into Quirks mode, making IE7, 8, and 9 behave... well... quirky :) Place the following meta tag in your head section to improve things for IE:
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
You can see what "Browser Mode" and "Document Mode" IE is running in by bringing up the developer toolbar (F12), you can tweak it temporarily for your browsing session to see what happens if document mode is "IE9 standards".
A short update. You may also want to try using w3 validator. One of the errors it gives me for your site:
Line 1, Column 15: Comments seen before doctype. Internet Explorer will
go into the quirks mode.
There are also a few errors on unclosed tags, which can throw off rendering.
What we do is using a seperate .css for the IE versions and in the root we determine the browser and include that .css
So include your normal css for all browsers and for the IE versions include the specific .css file which overwrites the necessary party of the main stylesheet.
Edit: And like Jeroen said, force the IE to render in it's real mode, not some compatible or quirks thing.
I created a quick and dirty HTML file to demonstrate an issue I am encountering in IE compatibility mode. When I open it in IE8 from my desktop, it opens in standard mode. I need to be able to switch it to compatibility mode, but the icon for that disappears when I am viewing a local HTML document. What's up with that?
UPDATE: None of the three proposed solutions has resulted in the compatibility mode icon showing in IE8. Instead, I have put my code into an .aspx page and executed it through Visual Studio. Since it's originating from localhost, the browser thinks it is a remote document and is displaying the compatibility icon like I wanted.
However, if anyone can get this to work without having to do that, I am still open to ideas since launching a web app isn't really the ideal solution for me.
I'm not sure whether this'll work because of IE's many crazy exceptions and rules regarding local files and compatibility mode, but try the META tag approach.
In your <head>, for example say:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" >
See understanding compatibility modes to make sure you pick the right one.
You could try pressing F12 to open the developer toolbar, and change it in there.
Update: Have you tried tools > compatibility view settings > display all websites in compatibility view?
Users can override the ‘local
intranet’ setting by un-checking
‘Display intranet sites in
Compatibility View’ at Tools ->
Compatibility View Settings.
http://blogs.msdn.com/b/ie/archive/2009/06/17/compatibility-view-and-smart-defaults.aspx
None of the three proposed solutions has resulted in the compatibility mode icon showing in IE8. Instead, I have put my code into an .aspx page and executed it through Visual Studio. Since it's originating from localhost, the browser thinks it is a remote document and is displaying the compatibility icon like I wanted.
However, if anyone can get this to work without having to do that, I am still open to ideas since launching a web app isn't really the ideal solution for me.
Is there a way to trigger standards mode in IE7 when using the HTML5 doctype?
My document starts like this:
<!DOCTYPE html>
<html>
<head>
...
F12 opens Developer Tools in IE 9. Alt+7, Alt+8, & Alt 9 will allow you to toggle between browser versions. There are also menus that allow you to change both document and standards modes.
A couple things:
If you are trying to view the DOM tree using the developer tools and switching between different versions in compatibility mode, you should know that you need to refresh each time you switch modes. Otherwise you won't be able to see the tree.
Also, these emulations are not exactly like the original browsers. It really is impossible to see "the way another browser would render" a page unless you are on that other browser.
I recommend using browsershots.org. It's free, and requires no download. If you want to get really sophisticated, there are other options. However I recommend browsershots. Just beware that it takes a few minutes to get a couple images back, and there is a maximum limit per day. You can raise that a bit by registering your account.
Use <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/> in the head section.
I have just installed IE9 beta and on a specific site I created (HTML5) IE9 jumps to compatibility mode unless I manually tell it not to. I have tried removing several parts of the website but no change. Including removing all CSS includes. On some other website of me it goes just fine.
Also, don't set it manually because then IE9 remembers the user setting and you can't turn it back to automatic (or at least I haven't found how, not even via private browsing and emptying cache)
Anyway. The site where it jumps to compatibility mode: http://alliancesatwar.com/guide/
One where it renders correct: http://geuze.name/basement/ (I can't post more than 1 hyperlink)
Both use the same doctype and all. Those sites have a lot in common(apart from appearance) using the same basic template(encoding, meta tags, doctype and the same javascript)
It would be great if someone has an answer for me! An HTML5 website that renders in IE7-mode is pretty... lame.
Works in IE9 documentMode for me.
Without a X-UA-Compatible header/meta to set an explicit documentMode, you'll get a mode based on:
whether the user has clicked the ‘compatibility view’ button in that domain before;
perhaps also whether this has happened automatically due to some other content on the site causing IE8/9's renderer to crash and fall back to the old renderer;
whether the user has opted to put all sites in compatibility view by default;
whether IE thinks the site is on your intranet and so defaults to compatibility view;
whether the site in question is in Microsoft's own list of websites that require compatibility view.
You can change these settings from ‘Tools -> Compatibility view settings’ from the IE menu. Of course that menu is now sneakily hidden, so you won't see it until you press Alt.
As a site author, if you're confident that your site complies to standards (renders well in other browsers, and uses feature-sniffing to decide what browser workarounds to use), I suggest using:
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
or the HTTP header:
X-UA-Compatible: IE=Edge
to get the latest renderer whatever IE version is in use.
I put
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
first thing after
<head>
(I read it somewhere, I can't recall)
I could not believe it did work!!
To force IE to render in IE9 standards mode you should use
<meta http-equiv="X-UA-Compatible" content="IE=edge">
Some conditions may cause IE9 to jump down into the compatibility modes. By default this can occur on intranet sites.
I've posted this comment on a seperate StackOverflow thread, but thought it was worth repeating here:
For our in-house ASP.Net app, adding the "X-UA-Compatible" tag on the web page, in the web.config or in the code-behind made absolutely no difference.
The only thing that worked for us was to manually turn off this setting in IE8:
(Sigh.)
This problem only seems to happen with IE8 & IE9 on intranet sites. External websites will work fine and use the correct version of IE8/9, but for internal websites, IE9 suddenly decides it's actually IE7, and doesn't have any HTML 5 support.
No, I don't quite understand this logic either.
My reluctant solution has been to test whether the browser has HTML 5 support (by creating a canvas, and testing if it's valid), and displaying this message to the user if it's not valid:
It's not particularly user-friendly, but getting the user to turn off this annoying setting
seems to be the only way to let them run in-house HTML 5 web apps properly.
Or get the users to use Chrome. ;-)
The site at http://www.HTML-5.com/index.html does have the X-UA-Compatible meta tag but still goes into Compatibility View as indicated by the "torn page" icon in the address bar. How do you get the menu option to force IE 9 (Final Version 9.0.8112.16421) to render a page in Standards Mode? I tried right clicking that torn page icon as well as the "Alt" key trick to display the additional menu options mentioned by Rene Geuze, but those didn't work.
As an aside on more modern websites, if you are using conditional statements on your html tag as per boilerplate, this will for some reason cause ie9 to default to compatibility mode. The fix here is to move your conditional statements off the html tag and add them to the body tag, in other words out of the head section. That way you can still use those classes in your style sheet to target older browsers.
Looks fine to me:
You're sure you didn't on the settings globally or something? This is a clean installation of the beta on Windows 7. The developer tools report that the page is defaulting to IE9 Standard Mode.
I recently had to resolve this issue and here's what I did :
First of all, this solution is around tuning Apache server.
Second main think is that there's a bug in the IE9 which means that the meta tag will not work, instead of this solution try this
find/open your httpd.conf
uncomment/or add the following line
LoadModule headers_module modules/mod_headers.so
add the following lines
<IfModule headers_module>
Header set X-UA-Compatible: IE=EmulateIE8
</IfModule>
save/restart your Apache server,
browse to your page with IE9, use tools like wireshark or fiddler or use IE developer tools to check the header is there