Thursday, 15 November 2012

Hack for Browser Compatibility in IE 6+



How many times you might have come across a situation where your web-page looks cluttered in different versions of IE(I am strictly speaking about IE here). Creating a Bank's Application have always made me go through legacy code and compatibility for the applications in IE.


There is something called as the Document mode in Browsers, and this is what handles the rendering of CSS and HTML.

There are 2 majorly known Document modes a Web Browser supports

1) Standard -pages are rendered according to the HTML and CSS specifications,
2) Quirks -pages rendered as If to made to emulate the behavior of older browsers.


If you force the document mode to Quirks mode, web-pages will have the same look and feel in all the IE6+ versions.

Add the following piece of code for specifying the DOCTYPE to your web-page will make it render in Standard mode , and if you do not specify any DOC-TYPE(a bad practice ) it will render in Quirks mode.

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




One Exception to this is IE 6+Quirks mode in any version of IE will also be triggered if anything precedes the DOCTYPE. For example, if a hypertext document contains a comment, space or any tag before the DOCTYPE declaration, IE will use quirks mode:

<!-- This comment will put IE 6, 7, 8, and 9 in quirks mode -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">




Happy developing for legacy systems.

No comments:

Post a Comment