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, it was an absolute mess back in the 1990s when there were no standards of CSS and every browser had a different way of interpreting styles. At that time webmasters used to create their WebPages by 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 a 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 act 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 the 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 the old manner to 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 whereas in standards more width and height do not include padding and borders.
- In quirks, mode pictures can be placed inside a table-cell without having a gape at the bottom of the 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 concerning default font-size of browser which is 16px in most cases, but in the standard model, 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 differences matter a lot and have to potential to alter the outlook of a webpage.
Coming up with advantages of quirks mode is not a 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.