As strange as it might appear to you but it is true that all browsers do not use the same algorithm for interpreting the styles of CSS and this is the basic reason behind cross-browser compatibility issues. Although it is still a serious problem, but it was an absolute mess back in 1990’s when there were no standards of CSS and every browser had a totally different way of interpreting styles. At that time webmasters used to create their WebPages in accordance with browsers of their time and hence did not use any standards of CSS at all.
When W3C declared standards for CSS all browsers changed their algorithms and started to move them closer to these standards as much as possible. With these changes in algorithms arose a serious problem that all the web-pages which were made for old algorithms of browsers started to appear as total mess. To solve this problem, browsers came up with the idea of quirks mode. This mode is triggered when no doctype is declared at the beginning of the webpage. In this mode, browsers acts like old browsers and do not interpret styles according to CSS standards of today. In quirks mode browsers use old algorithms and old rules for interpreting styles. This way the pages which were created before declaration of CSS standards (these pages did not have any doctype) will appear as their webmasters intended their pages to be. In addition to that those webmasters of today who want to get their pages interpreted in old manner have a choice of doing so by not declaring a doctype.
If a webmaster declares a complete doctype, standards mode is triggered in modern browsers. In standards mode browsers interpret styles according to modern CSS standards.
There are many differences between quirks mode and standards mode, but here we will discuss some major differences between them:
- In quirks mode width and height includes borders and padding where as in standards more width and height do not include padding and borders.
- In quirks mode picture can be placed inside a table-cell without having a gape at the bottom of picture, whereas in standards mode there is always a gape when a picture is placed inside a table-cell.
- In quirks mode if the font-size of a table is mentioned in percentage then it is interpreted with reference to default font-size of browser which is 16px in most cases, but in standard mode this in font-size is interpreted in relevance with the font-size of the body text.
The above mentioned differences might not seem significant to an inexperienced web-designer but these difference matter a lot and have to potential to totally alter the outlook of a webpage.
Coming up with advantages of quirks mode is not tough job, but It highly recommended that you should avoid using it as much as possible because there is a possibility that future browsers might change the way they interpret the styles and if they do so the webmasters who are using this mode would have a huge disadvantage.