IE9 has a weird problem where it renders intranet sites in compatibility mode.
Does anyone know a way how to prevent this from happening?
Note: I am not looking for a way to prevent it on a single users machine, but some programmatic way to prevent the site from ever rendering in compatibility mode.
After an exhaustive search, I found out how to successfully prevent an intranet site from rendering in compatibility mode in IE9 on this blog:
From Tesmond's blog
There are 2 quirks in IE9 that can cause compatibility mode to remain in effect.
The X-UA-Compatible meta element must be the first meta element in the head section.
You cannot have condtional IE statements before the X-UA-Compatible meta element.
This means that if you use Paul Irish's wonderful HTML5 Boilerplate then on an Intranet with default IE9 settings your website will display in compatibility mode. You need to change the start of the boilerplate from the following:-
<!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 charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
to:
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta charset="utf-8">
Following from #novicePrgrmr's answer, there seems to be a workaround for IE9 loading Intranets in IE7-mode. While this still triggers compatibility mode, I found a slight modification to Paul Irish's HTML5 boilerplate markup at least allows IE9 to render Intranets in IE9 standards:
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta charset="utf-8">
</head>
<!--[if lt IE 7]> <body class="home lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <body class="home lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <body class="home lt-ie9"> <![endif]-->
<!--[if IE 9]> <body class="home lt-ie10"><![endif]-->
<!--[if gt IE 9]><!--> <body class="home"> <!--<![endif]-->
<p>content</p>
</body>
</html>
This is still valid HTML, and existing IE-specific CSS should still work just fine, provided you target IE using .lt-ie rather than html.lt-ie.
This can be done by adding a simple meta tag
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
Another way to accomplish this is to add this code to your .htaccess file!
# ----------------------------------------------------------------------
# Better website experience for IE users
# ----------------------------------------------------------------------
# Force the latest IE version, in various cases when it may fall back to IE7 mode
# github.com/rails/rails/commit/123eb25#commitcomment-118920
# Use ChromeFrame if it's installed for a better experience for the poor IE folk
<IfModule mod_headers.c>
Header set X-UA-Compatible "IE=Edge,chrome=1"
# mod_headers can't match by content-type, but we don't want to send this header on *everything*...
<FilesMatch "\.(js|css|gif|png|jpe?g|pdf|xml|oga|ogg|m4a|ogv|mp4|m4v|webm|svg|svgz|eot|ttf|otf|woff|ico|webp|appcache|manifest|htc|crx|oex|xpi|safariextz|vcf)$" >
Header unset X-UA-Compatible
</FilesMatch>
</IfModule>
If you can add code to the homepage, you can simply add this:
<meta http-equiv="X-UA-Compatible" content="IE=edge">
to your website's header.
(You can also use <meta http-equiv="X-UA-Compatible" content="IE=9"> to force IE9-Renderer)
This will force IE9 to render in standard mode.
Another way is to use another doctype:
Put this to the top of your code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
Related
Can you tell me what is supposed to happen for IE browsers?
<!DOCTYPE html><!--[if lt IE 9]><html class="no-js lt-ie9" lang="en" dir="ltr"><![endif]--><!--[if gt IE 8]><!-->
<html class="no-js" lang="en" dir="ltr">
<!--<![endif]-->
<head>
...
I can understand that non-IE browsers would only interpret:
<html class="no-js" lang="en" dir="ltr">
but the condition for greater than IE8 isn't making a lot of sense:
<!--[if lt IE 9]> ... <!--[if gt IE 8]><!-->
<html class="no-js" lang="en" dir="ltr">
<!--<![endif]-->
Is this a hack? The notations for opening and closing comments don't match.
The extra !-- bits are there to make it a valid HTML comment so that validators don't complain about bogus comments. More on that here and here. What non-IE browsers really see are two regular HTML comments containing [if gt IE 8]><! and <![endif] respectively.
The conditional comments allow greater than IE8 to see that <html> tag. As you've correctly pointed out, non-IE browsers will also consume that same <html> tag — the !-- bits are what allow them to do so. I wouldn't call it a hack, but then again, conditional comments themselves might be a hack depending on whom you ask (I certainly don't think so).
According to HTML5 Boilerplate, I would expect the following included meta tag to remove the Compatibility Mode button from IE8:
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
But when I view my site in IE8, the compatibility mode button is still there. I want my site to work in IE8 and above and I do not want my visitor's IE browsers to show a compatibility mode button. The problem is that if someone clicks it by accident and turns on Compatibility mode in an IE8 browser, then my page doesn't render correctly because of weird IE7 quirks.
So how do I turn off the button?
EDIT:
Here is the beginning of my head tag:
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
It's the same as default H5BP. I have also tried moving the compat. mode meta tag to be the first tag in <head> with no difference.
This has been going on for a long time (https://github.com/h5bp/html5-boilerplate/issues/1187). I use this (modify the classes below the doctype for your needs):
http://nicolasgallagher.com/better-conditional-classnames-for-hack-free-css/
<!--[if IE ]><![endif]-->
<!doctype html>
<!--[if IE 8 ]> <html class="no-js lt-ie9 ie8" lang="en"> <![endif]-->
<!--[if IE 9 ]> <html class="no-js lt-ie10 ie9" lang="en"> <![endif]-->
<!--[if (gte IE 10)|!(IE)]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
I know this is a old problem, and there are alot of fixes for this. I have applied the following, but still some of my users get the quirks mode. And its only users that run IE 8.
<!doctype html>
and
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
It seems like this is not enough, the page is still rendering in quirksmode in IE 8.
Since this is an umbraco/c# site, the first row in the source is empty. This is because of the Master directive in the top. You cannot move above it. See picture.
This is some code from the site.
<!doctype html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[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]-->
<!-- Consider adding an manifest.appcache: h5bp.com/d/Offline -->
<!--[if gt IE 8]><!-->
<html class="no-js" lang="sv">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<!-- Use the .htaccess and remove these lines to avoid edge case issues.
More info: h5bp.com/b/378 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
The source is like this.
<%# Master Language="C#" AutoEventWireup="true" %>
<!doctype html>
<%# Import Namespace="System.Web.Configuration" %>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[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]-->
<!-- Consider adding an manifest.appcache: h5bp.com/d/Offline -->
<!--[if gt IE 8]><!-->
<html class="no-js" lang="sv">
The "Master" creates the empty line in the top.
Installing Google Chrome Frame fixes the problem, but due to citrix environments some of our users don't have the full control to install plugins.
Check out Henri Sivonen’s page Activating Browser Modes with Doctype, which discusses the IE 8/9 specialties as well and (despite the page name) also factors other than doctype declaration that may affect browser mode.
Is the page on an intranet? I believe IE8 defaults to quirks mode in that case. You could set a group policy to get around this though.
I am getting the error: X-UA-Compatible META tag ('IE=7') ignored because document mode is already finalized.
I have read that the fix for this is that the meta tag is not declared high enough in the head tag, however I have tried moving this meta tag to be the very first line of the head tag and that does not fix the error.
I am working in a Grails .gsp file and the file also uses knockout js.
Here is the relevant code:
<!doctype html>
<!--[if lt IE 7 ]> <html lang="en" class="no-js ie6"> <![endif]-->
<!--[if IE 7 ]> <html lang="en" class="no-js ie7"> <![endif]-->
<!--[if IE 8 ]> <html lang="en" class="no-js ie8"> <![endif]-->
<!--[if IE 9 ]> <html lang="en" class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en" class="no-js"><!--<![endif]-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>myInfinitec Membership Management</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="/ucpmanagementportal/static/images/favicon.ico" type="image/x-icon">
<meta name="layout" content="main"/>
<script src="/ucpmanagementportal/static/plugins/jquery-1.7.1/js/jquery/jquery-1.7.1.min.js" type="text/javascript" ></script>
<link href="/ucpmanagementportal/static/bundle-bundle_coreCSS_head.css" type="text/css" rel="stylesheet" media="screen, projection" />
</head>
Edit: In the IE developer window there are "Text- empty text node" lines being generated between every line. Perhaps this counts as having something before the X-UA-Compatible meta tag. I read that the fix is to add display: block and zoom: 1 to the affected elements but this does not work. Here is an example of what I am describing:
<head>
Text - Empty Text Node
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
Text - Empty Text Node
<meta style="display: block; zoom: 1;" http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
Text - Empty Text Node
Okay well I solved my problem, though my problem turned out to have nothing to do with the error I was describing. I was experiencing errors due to IE's caching of ajax calls and was able to fix the issue by adding jQuery.ajaxSetup({ cache: false }).
This did not ever work for me. The fix I found is to add the X-UA-Compatible value to a before Interceptor of each controller and that seemed to make it work everytime. For example, in each controller I had
def beforeInterceptor = [action : this.&setBrowserCompat]
private setBrowserCompat(){
response.addHeader("X-UA-Compatible", "IE=edge")
}
This seemed to always work. Hope this is helpful
I'm using the excellent HTML 5 Reset template at html5reset.org and my X-UA-Compatible meta tag doesn't seem to work. Here is what my header looks like:
<!DOCTYPE html>
<!--[if lt IE 7 ]> <html class="ie ieNoHtml5 ie6 no-js" lang="en"> <![endif]-->
<!--[if IE 7 ]> <html class="ie ieNoHtml5 ie7 no-js" lang="en"> <![endif]-->
<!--[if IE 8 ]> <html class="ie ieNoHtml5 ie8 no-js" lang="en"> <![endif]-->
<!--[if IE 9 ]> <html class="ie ie9 no-js" lang="en"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--><html class="no-js" lang="en"><!--<![endif]-->
<!-- the "no-js" class is for Modernizr. -->
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>Title of Page</title>
The option to use compatibility view mode in IE is displayed (broken page icon in URL field). The problem is that some of my clients have set their IE9 browsers into 'always use compatibility view' mode, the result being that the website looks like IE7 even though they're using IE9, and X-UA-Compatible is suppose to override this.
Now if I remove the funny header stuff:
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
...it suddenly starts working fine.
I've noticed that html5reset.org itself seems to display the broken page icon, so it doesn't seem to work either, but html5boilerplate.com DOES work, and seems to use the same approach.
Adding the X-UA-Compatible into the response header via webserver config seems to fix it, but I'd rather not rely on this approach.
Update: It seems that html5boilerplate.com is just sending X-UA-Compatible in the HTTP response headers if it detects that the browser is IE. This seems the way to go.
HTML5 Boilerplate recommends the webserver config. It's faster and solves a few edge cases that the markup solution doesn't work with: https://github.com/h5bp/html5-boilerplate/blob/v4.0.0/doc/html.md#x-ua-compatible