Please look at this html page:
<!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">
<title>Test</title>
<meta name="description" content="">
<!--[if IE 7]>
<script type="text/javascript">alert("IE7")</script>
<![endif]-->
<!--[if IE 8]>
<script type="text/javascript">alert("IE8")</script>
<![endif]-->
<!--[if IE 9]>
<script type="text/javascript">alert("IE9")</script>
<![endif]-->
</head>
<body data-pagename="home">
</body>
</html>
I can't understand why if I view it in IE8 and IE7 all works fine, while if I view the page in IE9, the alert is as if I were in IE7. If I change the firsts lines before the head tag with
<!DOCTYPE html>
<html class="no-js">
<head>
all works fine.
As if something between the doctype and the head changes the rendering beahviour.
The question are:
is it a my fault, maybe beacause I'm using something in an illegal way or is it an IE9 fault?
I can't understand why if I view it in IE8 and IE7 all works fine, while if I view the page in IE9, the alert is as if I were in IE7.
It's complicated:
Is "Display All Sites in Compatibility View" set?
Is "User Compatibility View List" enabled?
Is a match found?
Is "MS Compatibility View List" enabled?
Is a match found?
Is "Display Intranet Sites in Compatibility View" set?
Is the webpage in the "Intranet Zone"?
References
Determining IE9 Document Mode(SVG)
Determining IE9 Document Mode(PNG)
IE(9) Compatibility Features for Site Developers
Related
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">
<!--[if IEMobile 7 ]>
<html lang="en-US"class="no-js iem7">
<![endif]-->
<!--[if lt IE 7 ]>
<html lang="en-US" class="no-js ie6 oldie">
<![endif]-->
<!--[if IE 7 ]>
<html lang="en-US" class="no-js ie7 oldie">
<![endif]-->
<!--[if IE 8 ]>
<html lang="en-US" class="no-js ie8 oldie">
<![endif]-->
<!--[if (gte IE 9)|(gt IEMobile 7)|!(IEMobile)|!(IE)]><!-->
<html lang="en-US" class="no-js">
<!--<![endif]-->
What are these useful for? What is the best and the most suitable codes as above should be in a web page?
Those are conditional comments.
The <!--[if IE.. comments are generally used for including some custom code in the HTML file only if the browser is some version of IE.
Specifically the code you posted detects multiple versions of IE including a Windows Phone 7 browser and defines CSS classes on the html root element accordingly.
This allows you to write CSS targetd specifically for that browser like this:
.iem7 .my .selector {
/* this rule will apply only if the browser is ie on windows phone 7 */
}
I tried adding Irish's html5boilerplate to a page but now am seeing all this extra space between my table tr's. There's no CSS that controls the page. It's just jsp code and html. Basically, there's code being added where the pages need to be in standards mode. All other pages had small, manageable differences. But this is an older page laid out using tables. I attempted
<pre>
<style>
table{display:block}
tr{margin:0;padding:0}
</style>
</pre>
to remove the margins to no avail.
When i add this to the head, I see strange effects in chrome and ff:
<pre>
<!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]-->
</pre>
If there's no easy fix, I guess adding the head will have to wait till the page gets redone.
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.
Can anyone tell me what this is:
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js ie ie6" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js ie ie7" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js ie ie8" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js iframe" lang="en"> <!--<![endif]-->
I have seen this on so many pages but there is no JavaScript link on some of the pages to support the document declaration.
It seems to be snippet from html5 Boilerplate's standard format for 'browser detection' , see http://html5boilerplate.com/
The section that you have highlighted allows for only one section of the <html> tag to be parsed depending upon the flavour of browser that the site visitor is using.
Read more about this method at the authors website > http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/
This is the doctype for HTML5 pages
<!DOCTYPE html>
The following lines means that the code between the commented tags is IE specific (first one is for browsers less than IE7 (IE6, IE5, etc...), second one for IE7, third one for IE8 and the last one for >= IE9)
<!--[if lt IE 7]> <html class="no-js ie ie6" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js ie ie7" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js ie ie8" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js iframe" lang="en"> <!--<![endif]-->
<!--[if lt IE 7]>
That means that code inside the <!--[if lt IE 7]>...<![endif]--> will work only in IE 7 browser
and <!--[if lt IE 8]>...<![endif]--> only in IE8 browsers
This hint working only in IE browsers. For example you can write <!--[if lt IE 7]><style .../><![endif]--> and this style will work only in IE 7. Than on the next line you can write <!--[if lt IE 8]><style .../><![endif]--> and this styles will work only in IE8
Those are only checks for compatibility with older browsers
<!DOCTYPE html> usually refers to HTML5, browsers below IE9 don't support HTML5 at all, so tweaks are needed. That's why there are HTML if-clauses that check if you use IE and which version. The HTML element gets a special class for that browser version so that CSS can see if it's IE and in which version (e.g. for fixing the box model of IE6)
The no-js class probably gets removed by JavaScript so that CSS can access specific elements only if JavaScript is on/off
You should use this as your Doctype: <!DOCTYPE html>
The rest is not relevant for the doctype, and is IE-specific.