stuff to click

Internet Explorer rendering modes

difficulty 1 comments 1 added Mar 01, 2011 category web

Rendering modes on the one hand was a confusing invention of IE developers, on the other hand it appeared as an enlightenment. The problem was how to keep IE5's backward compatibility and at the same time step on the way of supporting CSS and other new standards. There was huge legacy of sites which were made without thinking about standards and Microsoft couldn't sacrifice them. The brilliant idea was to switch between rendering modes depending on how a web document was starting. If it contained document type declaration (DOCTYPE) the document was processed in the standard mode otherwise in old "quirk" mode.

Standard vs Quirk

So what do we need for enabling standard mode in IE? Actually you just need to place one of the following string to the beginning of the document

for HTML5:

 <!DOCTYPE html> 

for HTML4 (strict, may replace with "loose"):

 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/DTD/strict.dtd"> 

for XHTML (strict, may replace with "transitional"):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

even this works (but not recommended):

 <!DOCTYPE> 

Some people state that incomplete DOCTYPEs (like last one or which don't contain URL) will cause quirk mode in IE, but it is not true. I checked IE versions 6,7 and 8 with just <!DOCTYPE> string and it worked as standard mode. Probably the behavior changed because of browser's last patches, it's hard to say for sure.

Generally you can not put anything before DOCTYPE declaration, even comments. But starting with IE7 you may insert XML prolog without going to quirk mode:

<?xml version="1.0" encoding="utf-8" standalone="no" ?>
 
 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Compatibility modes

IE8 introduced document compatibility modes or to say more precisely it introduced the way to specify the document mode. IE browser now can choose how to render the document looking up the new "X-UA-Compatible" meta tag. Since every new IE version supports more and more new standards, this tag enables a web developer to flexibly set the most appropriate for the web document version of a browser.

IE8 and later versions can emulate the "DOCTYPE" behavior of older versions To enable emulation modes set meta tag value to "Emulate IE7", "Emulate IE8" or "Emulate IE9", in this case the browser will respect DOCTYPE declarations. Meta tag values "IE5" (quirk), "IE7","IE8", "IE9", "Edge" (the highest version, for testing purpose) will set mode disregarding the DOCTYPE.

For my websites I use both DOCTYPE declaration (required by standard) and meta tag approach (required by IE):

 
<?xml version="1.0" encoding="utf-8" standalone="no" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>error 404</title> 
<meta http-equiv="X-UA-Compatible" content="IE=8" />
...
 

Interestingly enough new IE versions may set render mode also basing on HTTP headers. So if you don't want to insert meta tag in all your documents, you may send HTTP header:

X-UA-Compatible: IE=8

To do this you may use server side scripting language or web server settings: web.config for IIS servers, config file or .htaccess files for Apache.

Comments

Coolio: Dats COOL

added Sat, 01 Dec 2012 11:48:13 -0500
Cool data here
Place a comment

I also highly recommend this book, it is quite helpful and nice reading:

developing with web standards