Examples: different quirks

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 anymore. 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 IE9 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.

Quotation marks around quotes

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.

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.)

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.

Case sensitive class names

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.

:hover on non-anchor elements

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.

Inherited font styles in table

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.

Various IE-only quirks

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:

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.

Margin anomalies

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.

Collapsing blocks

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.

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.

Submitted value for buttons

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.

Broken whitespace

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.

Error handling: dd outside of a dl

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 dds are never supposed to occur outside of dls, but there you
have it.)

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!

Class names starting with a digit

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.

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.

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".