Page keeps entering Quirks mode on IE8 even with DOCTYPE set

1.4k views Asked by At

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!

2

There are 2 answers

1
John Conde On

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

0
Deborah On

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.