Quirks mode v/s strict mode

as web technology advancing and also need to maintain revers compatibility of older web standard with new advance web standard , all web browser are supporting two modes.

1) Quirk mode

2) Strict mode

Quirks Mode	Strict Mode
It is older browser rule to render web page in modern browser	It is new advance rule to render web pages in modern browser
if !DOCTYPE is not specified in web page then modern browser will render page as it is render by older browser.	To render your web page with strict mode in modern browser one needs to specify !DOCTYPE in webpage
This mode enable older html document work in todays browser also	This mode will not render older html document properly
In this mode IE6 browser may not follow CSS box model to calculate height and width	In this mode IE6 browser will follow CSS box model to calculate height and width
When modern browser fail to identify proper !DOCTYPE "Switch" then it will start rendering in this mode following are some case of quirk mode · When no !DOCTYPE describe on top of page · When !DOCTYPE not valid or any spelling mistake will turn on quirk mode · If you put any comment before !DOCTYPE will also turn on quirk mode in IE browser "http://www.w3.org/TR/html4/strict.dtd">	Write "http://www.w3.org/TR/html4/strict.dtd"> On top of the document. Hence document will be render with strict mode in modern browser

One prominent difference between quirks and standards modes is the handling of the CSS Internet Explorer box model bug. Before version 6, Internet Explorer used an algorithm for determining the width of an element's box which conflicted with the algorithm detailed in the CSS specification, and due to Internet Explorer's popularity many pages were created which relied upon this incorrect algorithm. As of version 6, Internet Explorer uses the CSS specification's algorithm when rendering in standards mode and uses the previous, non-standard algorithm when rendering in quirks mode.

Another notable difference is the vertical alignment of certain types of inline content; many older browsers aligned images to the bottom border of their containing box, although the CSS specification requires that they be aligned to the baseline of the text within the box. In standards mode, Gecko-based browsers will align to the baseline, and in quirks mode they will align to the bottom.^[3]

Additionally, many older browsers did not implement inheritance of font styles within tables; as a result, font styles had to be specified once for the document as a whole, and again for the table, even though the CSS specification requires that font styling be inherited into the table. If the font sizes are specified using relative units, a standards-compliant browser would inherit the base font size, then apply the relative font size within the table: for example, a page which declared a base font size of 80% and a table font size of 80% (to ensure a size of 80% in browsers which do not properly inherit font sizes) would, in a standards-compliant browser, display tables with a font size of 64% (80% of 80%). As a result, browsers typically do not inherit font sizes into tables in quirks mode