Quirks mode is a rendering mode used by the browsers to simulate older browsers, in order to display older webpages the same way they would have been displayed in the previous century.
These days, there's no reason to use quirks mode for new pages any more. To demonstrate why you shouldn't use it, if you care for browser interoperability, here are some examples where browsers differ when you use quirks mode, while they all behave the same in standards mode.
Note: The situation with IE has changed since IE10; its default quirks mode no longer acts very different from standards mode, but it has a separate "IE5 mode" that you can activate in the F12 screen, which behaves like the quirks mode in earlier versions. Most of the below examples were written when IE10 didn't exist, so you may read "IE9 or below" or "IE5 mode". (IE also has IE7 through IE10 modes, which behave like the respective browser versions in standards mode.)
Also note that Opera in this document means the Presto based browser (with version numbers up to 12.18). Later
versions of Opera use the Blink engine, which makes Opera behave the same as Chrome.
And Konqueror means using the KHTML engine. Konqueror can also use the Webkit engine, but that makes it behave the
same as Safari.
Given this HTML:
<q>This is a quote</q>
In quirks mode, IE doesn't display quotation marks, while most other browsers do.
In standards mode, there are no differences and all browsers display quotation marks.
This is a quote
Now in quirks mode. Show in standards mode.
Given this HTML:
<table border="1"> <tr><td>one</td><td>two</td></tr> <tr><td>three</td><td bgcolor="yellow"></td></tr> </table>
In quirks mode, Safari and Chrome draw a border around the empty cell (four), while most other browsers don't.
In standards mode, there are no differences and all browsers draw the border around the empty cell.
one | two |
three |
Now in quirks mode. Show in standards mode.
Given this HTML:
<img src="pic.png" alt="A picture">
In quirks mode, IE uses the alt text for a title (it displays the alt text as a tooltip), while most other browsers don't.
In standards mode, there are no differences and no browsers show a tooltip. (Note: only for IE8 and up. IE7 and below always show the tooltip, regardless of mode.)
Now in quirks mode. Show in standards mode.
Given this HTML:
<table border="1" cellpadding="0" cellspacing="0"> <tr><td><h4>h4 in table cell</h4></td></tr> <tr><td><dl><dt>dl in table cell</dt></dl></td></tr> <tr><td><ul><li>ul in table cell</li></ul></td></tr> <tr><td><form action="#"><div>form in table cell</div></form></td></tr> <tr><td><blockquote><div>blockquote in table cell</div></blockquote></td></tr> </table>
In quirks mode, Opera collapse all margins. Microsoft Edge and IE10 or up in the default (non-IE5) quirks mode also collapses all margins. Most other browsers (including IE9 and below) collapse only the top margins.
In standards mode, no collapsing takes place and all browsers show all margins normally. (Note: form
doesn't have margins in standards mode, but it does have a bottom margin in quirks.)
h4 in table cell |
|
|
|
Now in quirks mode. Show in standards mode.
Given this HTML:
<div style="border:1px solid; height:3em"> <p>p in div</p> </div>
In quirks mode, IE9 and below (or IE10 in IE5 mode) collapse the p's top margin, while all other browsers (including IE10 in ordinary Quirks mode) display the margins normally.
In standards mode, no collapsing takes place.
p in div
Now in quirks mode. Show in standards mode.
Given this HTML:
<table align="left"><tr><td nowrap>Floating tables do not</td></tr></table> <table align="left"><tr><td nowrap>wrap to the next line;</td></tr></table> <table align="left"><tr><td nowrap>instead, they overflow</td></tr></table> <table align="left"><tr><td nowrap>out of the window when</td></tr></table> <table align="left"><tr><td nowrap>they will be displayed</td></tr></table> <table align="left"><tr><td nowrap>like this; that is, in</td></tr></table> <table align="left"><tr><td nowrap>Quirks mode.</td></tr></table>
In quirks mode, these four tables are always displayed on the same line (side by side) by Firefox, Konqueror and IE, while most other browsers display them underneath each other if the window isn't wide enough.
In standards mode, all browsers display them underneath each other if the window isn't wide enough.
Floating tables do not |
wrap to the next line; |
instead, they overflow |
out of the window when |
they will be displayed |
like this; that is, in |
Quirks mode. |
Now in quirks mode. Show in standards mode.
Given this HTML:
<img src="pic.png" alt="" style="border:thin solid">
In quirks mode, IE draws a 2 pixel border around the image, while most other browsers draw a 1 pixel border.
In standards mode, all browsers draw a 1 pixel border.
Now in quirks mode. Show in standards mode.
Given this HTML:
<style type="text/css"> .classname {color:red} .className {color:green} </style> . . <div class="classname">text</div>
All modern browsers ignore the case of the class name in quirks mode and make the text green. However, there have been browsers in the past that did not ignore the case of the name, like Netscape 6; so the text came out red.
In standards mode, the class name is always case sensitive and the text is always red.
Now in quirks mode. Show in standards mode.
Given this HTML:
<style type="text/css"> .hovered:hover {border:1px solid} </style> . . <span class="hovered">span</span> <a class="hovered">anchor</a> <a class="hovered" href="#">anchor</a>
In quirks mode, IE and older versions of Firefox apply the hover style only to the last a
, while most
other browsers apply the hover style to all three elements. Note: IE10 in "ordinary" Quirks mode applies the style
to both a
elements, but not the span
.
In standards mode, there are no differences and all browsers apply the hover style to all three elements.
Now in quirks mode. Show in standards mode.
Given this HTML:
<div style="font-variant:small-caps; font-style:italic; letter-spacing:4px; text-transform:capitalize"> A styled div <table><tr><td>A table in the div</td></tr></table> </div>
In quirks mode, Opera uses the div's font-variant
and text-transform
in the table, but
not font-style
or letter-spacing
. IE uses only the font-style
and
font-variant
, and most other browsers use only the letter-spacing
and
text-transform
. Edge doesn't use any of the styles.
Note that apart from this, the situation with tables is rather confusing: many properties, like
font-weight
, font-size
and white-space
, are reset to their factory defaults,
while color
is taken from the the style of the body
.
In standards mode, there are no differences and all browsers inherit these font styles normally.
A table in the div |
Now in quirks mode. Show in standards mode.
A great number of IE-only quirks are caused by the fact that IE's quirks mode uses an older rendering engine, that simply doesn't recognise the "newer" CSS features. (This was changed with IE10, that uses a newer quirks mode engine by default, but its IE5 mode does behave like this.) Some examples:
<table style="margin:0 auto; empty-cells:hide; border:1px solid"> <tr> <td style="background:gray"></td> <td style="white-space:pre">White space</td> </tr> <tr> <td style="outline:1px dotted">Dotted outline</td> <td><div style="display:inline-block; border:1px solid">div</div></td> </tr> </table>
In quirks mode, IE puts the table to the left, while other browsers put it in the centre in accordance with the
margin
rule. IE makes the color of the top left cell grey, while most other browsers hide it as per the
empty-cells
rule. And so on: IE collapses the spaces in the top right cell, doesn't draw the outline in
the bottom left cell and ignores inline-block
in the bottom right cell.
In standards mode, there are no differences and all browsers behave by the rules.
White space | |
Dotted outline | div |
Now in quirks mode. Show in standards mode.
Given this HTML:
<p style="font-weight:bold">the paragraph <div>in the div (after missing end tag)</div> after the div
In quirks mode, IE collapses the paragraph's bottom margin: there is no blank line between it and the div. Most other browsers give the p a correct bottom margin.
In standards mode, all browsers correctly display a blank line between the p and the div.
the paragraph
Note that this is not a case of the div being put inside the p. The p has ended, as you can see by the fact that the rest of the text is not bold.
Now in quirks mode. Show in standards mode.
Given this HTML:
<img src="pic.png" alt="" style="padding:5px; border:1px solid">
In quirks mode, IE doesn't apply the padding, while most other browsers do.
In standards mode, there are no differences and all browsers apply the padding.
Now in quirks mode. Show in standards mode.
Given this HTML:
<p><img src="pic.png" alt="" align="left">Lorem<br>ipsum</p>
In quirks mode, Opera puts the text right next to the image, while most other browsers (even IE10) leave a 3 pixel gap between the image and the text.
In standards mode, there are no differences and no browser leaves a gap.
Lorem
ipsum
Now in quirks mode. Show in standards mode.
Given this HTML:
<ul style="border:1px solid"><li>ul</li><li>ul</li></ul>
In quirks mode, the ul
has a 40px left margin in IE, while it has a padding in most other browsers.
So IE draws the border around the text part, keeping the bullets out of the border, while most other browsers put
the border around the whole structure.
In standards mode, all browsers put the border around the whole structure.
Now in quirks mode. Show in standards mode.
Given this HTML:
<div style="border:1px solid green"><span style="margin:1px"></span></div>
Browsers are supposed to collapse empty blocks: if a block element has no defined height, and no content (or only empty content), the block is displayed with a height of zero. In quirks mode however, the browsers get confused about the meaning of "(or only empty content)":most browsers collapse this div, except Edge, Firefox and (old) Opera.
In standards mode, all browsers agree that the content is not empty and no collapsing takes place.
Now in quirks mode. Show in standards mode.
Given this HTML:
This is a line with default size <div style="font-size:medium">This is a line with font size=medium</div> <font size="3">This is a line with font size=3</font>
In quirks mode, IE and older Operas (11 and earlier) give the second line a larger font size, while most other browsers give all lines the same size.
In standards mode, there are no differences and all browsers give all lines the same font size.
Now in quirks mode. Show in standards mode.
Given this HTML:
<div style="font-size:40px; font-weight:bold;"> A 40px block <h3>A h3 in the same block</h3> </div>
In quirks mode, IE gives the h3
the same font size it would have outside the container (19 px),
while most other browsers make it 47 px, based on the container's text size.
In standards mode, there are no differences and all modern browsers make it 47 px.
Now in quirks mode. Show in standards mode.
Given this HTML:
<div style="text-align:center"> <div style="width:10em; border:1px solid">centered</div> </div>
In quirks mode, IE centers the inner block element in the window, while most other browsers align it to the left.
In standards mode, there are no differences and all browsers align it to the left.
Now in quirks mode. Show in standards mode.
Given this HTML:
<style type="text/css"> .sized {width:160px; height:30px; padding:0 15px; border:15px outset} </style> . . <object class="sized" data="object.html">object</object> <div class="sized"> div </div> <img class="sized" src="img.png" alt="">
In quirks mode, IE makes the outer width of the object (measuring the border) 180 pixels wide, the div 160 and the img 190 pixels. All three elements are 220 pixels wide (160 + 2×padding + 2×border) in most other browsers.
In standards mode, there are no differences and the outer widths are 220 pixels in all browsers.
Now in quirks mode. Show in standards mode.
Given this HTML:
<div style="height:1em; border:1px solid"> line 1<br>line 2 </div>
In quirks mode, Opera and IE stretch the div to make room for the two lines, while most other browsers let the content overflow out of the div.
In standards mode, there are no differences and all browsers have the content overflow out of the div.
Now in quirks mode. Show in standards mode.
Given this HTML:
<div style="border:1px solid; width:30px; font-size:30px;"> <img src="pic.png" alt=""> </div>
In quirks mode, IE (including IE10) leaves room in the div below the picture for the descender, while most other browsers make the div exactly as high as the image.
In standards mode, there are no differences and all browsers leave room in the div below the picture for the descender.
Now in quirks mode. Show in standards mode.
Given this HTML:
<body style="width:12em; height:12em; outline:1px dotted;">
In quirks mode, IE ignores the sizes, while most other browsers apply them normally.
In standards mode, all browsers apply the styles normally.
Now in quirks mode. Show in standards mode.
Given this HTML:
<form action="#"> <p><input name="theInput"> <button>Enter</button></p> </form>
The button's default type
is supposed to be submit
, so you could omit this attribute in
theory. However, in quirks mode, IE does not submit the page when the user clicks the button.
In standards mode, all browsers submit the page when the user clicks the button.
Given this HTML:
<ul> <li style="font-size:10px">10 px</li> <li style="font-size:20px">20 px</li> <li style="font-size:30px">30 px</li> </ul>
In quirks mode, Firefox and IE give the bullets the same size, while the bullets scale with the text in most other browsers.
In standards mode, there are no differences and all browsers scale the bullets with the font size.
Update: Recent versions of Firefox (v50?) don't have this quirk any more, and neither is it in IE11's default quirks mode. So, no longer any differences here.
Now in quirks mode. Show in standards mode.
Given this HTML:
<button type="submit" name="submit" value="this">Click here</button>
When a button submits, it sends its name and value to the server. So this button sends
submit=this
.
IE in quirks mode however, submits the contents of the button. That is, the result is
submit=Click+here
.
You can see this happening by clicking the button and looking at the result in the location bar in your browser.
Now in quirks mode. Show in standards mode.
Given this HTML:
[ ] <br> [ <input type="hidden"> <input type="hidden"> ] <br> [ <i style="display:none">x</i> <i style="display:none">x</i> ]
Normally, all whitespace is collapsed to a single space on the screen, even when the spaces are interspersed with
hidden elements. That means the three lines above will come out looking the same.
Not so in the case of IE in quirks mode however.
In standards mode, IE does the sane thing and there are no differences among the browsers.
Now in quirks mode. Show in standards mode.
Given this HTML:
<dd>This is a dd</dd> and this is after
In quirks mode, Firefox and IE make the dd an inline element, while most other browsers make it a block.
In standards mode, there are no differences and it's a block in all browsers. (Of course, you should never
encounter this issue, as dd
s are never supposed to occur outside of dl
s, but there you
have it.)
Now in quirks mode. Show in standards mode.
Given this HTML:
<div style="width:15 em; border:1px solid"> test </div>
In quirks mode, Safari, older versions of Chrome (up to v20) and IE make the div 15 em wide, while most other browsers ignore the faulty width.
In standards mode, there are no differences and all browsers ignore the width, making it as wide as the window.
Now in quirks mode. Show in standards mode.
CSS widths without px are usually, but not always, accepted in quirks mode. Given this HTML:
<div style="border:5 solid">border 5 solid</div>
In quirks mode, Firefox doesn't draw a border, while most others (including Edge and IE10 in normal quirks mode) draw a 5 pixel border.
In standards mode, this is not accepted and no browser draws a border.
Now in quirks mode. Show in standards mode.
Given this HTML:
<div style="color:blue; color:undefined;"> test </div>
In quirks mode, IE ignores the style completely, while most other browsers use the first color, ignoring only the bad property as per the specs.
In standards mode, there are no differences and all browsers use the first color.
Now in quirks mode. Show in standards mode.
Given this HTML:
<div style="{background:lime; color:green;}"> test </div>
In quirks mode, Firefox, IE and Opera don't mind the faulty curly braces and show the colors; most other browsers ignore all of the style.
In standards mode, there are no differences and all browsers ignore the style.
Now in quirks mode. Show in standards mode.
Given this HTML:
<span style="width:200px; border:1px solid"> span </span>
In quirks mode, IE makes the span 200 pixels wide, while most other browsers make the span as wide as its contents.
In standards mode, there are no differences and all browsers make the span as wide as its contents.
Now in quirks mode. Show in standards mode.
Historically, hex colours without # were to be ignored in standards mode, although they were accepted in quirks mode. So given this HTML:
<font color="00FF00"> font color 00FF00</font> <div style="background:999000; border:5px solid 000000"> 999000, 000000 </div> <div style="background:AAA000; border:5px solid A00000"> AAA000, A00000 </div>
We'd expect that all these things are fully coloured in quirks mode, but would have the default appearance in standards mode.
However, all is not right in quirks mode.
Although the font shows up OK, Konqueror, Safari and Chrome don't display the top div's background colour.
IE9 and below are OK with both background colours, but only display the bottom div's border. Firefox doesn't
display any of the backgrounds or borders, and Opera and IE10 display only the bottom div's background and
border. Edge displays both borders, but only the bottom div's background.
In standards mode, there are no differences and all browsers display everything the same. That is, they ignore all backgrounds and borders, However, in a surprise move, they all do make the font green!
Now in quirks mode. Show in standards mode.
Given this HTML:
<style type="text/css"> .7even {color:gray} [class="\37 even"] {text-decoration:underline} </style> . . <div class="7even"> test </div>
IE uses the first style rule in quirks mode, but not the second (the text becomes gray). Most other browsers (including IE10 in its default quirks mode) only use the second style rule, underlining the text, but not making it gray.
In standards mode, there are no differences and all browsers only use the second style rule.
Now in quirks mode. Show in standards mode.
Given this HTML:
<p style="border:1px dotted; padding:16px;">Reference (16px)</p> <p style="border:1px dotted; padding:16px; padding:8px 8nm">test 8px 8nm</p> <p style="border:1px dotted; padding:16px; padding:8nm 8nm">test 8nm 8nm</p>
Most browsers ignore the padding with the unrecognised CSS units and leave the padding as is. IE however, gets confused and uses 0 for the left and right padding in the top example. In the bottom example, it uses 8px for top, left and right, and 0 for the bottom padding.
(Note: I used imaginary units here, because real units like q
or ch
would give
confusing results, as some browsers know them and some don't. Otherwise it's the same for those units.)
In standards mode, there are no differences and all browsers leave the padding as is.
Reference (16px)
test 8px 8nm
test 8nm 8nm
Now in quirks mode. Show in standards mode.
Unfortunately, the reverse is also true: browsers can agree on something in quirks mode, but differ in standards mode. For example, given this HTML:
<table cellpadding="9" border="1"> <tr><td style="line-height:0" height="20">20px high table cell</td></tr> </table>
In quirks mode, all browsers calculate the height using the border-box model, resulting in a 20px high cell (border to border). In standards mode, most browsers use the content-box model and make all of the cell 40px high. But Konqueror and Opera don't cooperate: they keep the border-box model and make the cell 20px high.
20px high table cell |
Then there's the special cases of table attributes colspan="0"
and rowspan="0"
. All browsers ignore those in Quirks mode, while in Standards mode, only Konqueror treats them both according to the specs. Firefox only treats rowspan="0"
correctly, while still ignoring colspan="0"
.
<table border="1"> <tr><th>H1</th><th>H2</th><th>H3</th><th>H4</th></tr> <tr><td>A1</td><td colspan="0">A2..4</td></tr> <tr><td>B1</td><td>B2</td><td>B3</td><td rowspan="0">B..D4</td></tr> <tr><td>C1</td><td>C2</td><td>C3</td></tr> <tr><td>D1</td><td>D2</td><td>D3</td></tr> </table>
H1 | H2 | H3 | H4 |
---|---|---|---|
A1 | A2..4 | ||
B1 | B2 | B3 | B..D4 |
C1 | C2 | C3 | |
D1 | D2 | D3 |
Now in quirks mode. Show in standards mode.