Wednesday, July 8, 2015

Internet Explorer doesn't render a web site correctly and goes into Quirks mode

I came across an interesting error with Internet Explorer 9 and a modern web site layout (using bootstrap and jQuery). When loading the web site, the style would render completely wrong (and unusable). 

Pressing F12 and looking at the developer console, revealed that the browser mode was IE9, but document mode was set to Quirks. By default web browsers will attempt to display HTML content to the specification of the W3C, quirks mode is a browsers way of attempting to display older web pages (with older standards of HTML).

However when quirks mode is activated for a web site with newer HTML mark-up it will completely butcher the page, due to the presence of new tags and techniques. From my testing I have found the following factors can cause Internet Explorer to enter quirks mode by default:
  1. Any code/comments before the Doctype element in the HTML. The doctype tag "<!doctype html>" should always be the first element on a page.
  2. The following tag should be the first item in your head section, as it basically tells the browser the HTML is up to a given standard.
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>

No comments:

Post a Comment