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

This is a quote

Now in standards mode. Show in quirks mode.

Handling of empty table cells

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.

onetwo
three

Now in standards mode. Show in quirks mode.

Alt without title

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

A picture

Now in standards mode. Show in quirks mode.

Blocks that normally have margins, in table cells

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 collapses all margins. 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

dl in table cell
  • ul in table cell
form in table cell
blockquote in table cell

Now in standards mode. Show in quirks mode.

Variant: blocks in containers with explicit height

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 Quirks 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 standards mode. Show in quirks mode.

Floating tables

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 over-flow</td></tr></table>
   <table align="left"><tr><td nowrap>out of the window when</td></tr></table>
   <table align="left"><tr><td nowrap>shown in 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 over-flow
out of the window when
shown in quirks mode

Now in standards mode. Show in quirks mode.

Border width keywords

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 standards mode. Show in quirks mode.

Case sensitive class names

Given this HTML:

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

text

Now in standards mode. Show in quirks mode.

:hover on non-anchor elements

Given this HTML:

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

span anchor anchor

Now in standards mode. Show in quirks mode.

Inherited font styles in table

Given this HTML:

   <div style="font-variant:small-caps; font-style:italic; letter-spacing:4px;">
    A styled div
    <table><tr><td>A table in the div</td></tr></table>
   </div>

In quirks mode, Opera uses only the div's font-variant in the table. Firefox, Chrome and Safari use only the letter-spacing. Konqueror uses only the font-style. IE (including IE10) doesn't use any of these styles.
Note that apart from this, the situation with tables is wholly confusing: the font-family is inherited from the parent, color is taken from the body style, font-size from the browser's user preferences, and line-height, white-space and font-style are reset to their factory defaults.

In standards mode, there are no differences and all browsers inherit these font styles normally.

A styled div
A table in the div

Now in standards mode. Show in quirks mode.

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

This is a dd
and this is after

Now in standards mode. Show in quirks mode.

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 Quirks 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 standards mode. Show in quirks mode.

No margin after missing </p> end tag

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

in the div (after missing end tag)
after the div

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 standards mode. Show in quirks mode.

Padding around images

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 standards mode. Show in quirks mode.

Margin after floating image

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 standards mode. Show in quirks mode.

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.

Now in standards mode. Show in quirks mode.

Collapsing blocks

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 Firefox and (old) Opera.

In standards mode, all browsers agree that the content is not empty and no collapsing takes place.

Now in standards mode. Show in quirks mode.

Font sizes

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.

This is a line with default size
This is a line with font size=medium
This is a line with font size=3

Now in standards mode. Show in quirks mode.

Header sizes

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.

A 40px block

A h3 in the same block

Now in standards mode. Show in quirks mode.

Centering of nested block elements

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.

centered

Now in standards mode. Show in quirks mode.

Widths of elements

Given this HTML:

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

object
div

Now in standards mode. Show in quirks mode.

Content too high

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.

line 1
line 2

Now in standards mode. Show in quirks mode.

Images in block elements

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 standards mode. Show in quirks mode.

Body size

Given this HTML:

   <body style="width:400px; height:400px; 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 standards mode. Show in quirks mode.

Button without type

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.

(Live example)

List bullet sizes

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 standards mode. Show in quirks mode.

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.

Now in standards mode. Show in quirks mode.

Broken whitespace

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.

[ ]
[ ]
[ x x ]

Now in standards mode. Show in quirks mode.

Tables in paragraphs

Given this HTML:

   <p style="border:1px solid">text 1
   <table><tr><td>text 2</td></tr></table>
   text 3</p>

All modern browsers act the same: in quirks mode, they put the table in the paragraph.
Although IE8 acts like that, IE11 in IE8 mode doesn't put the table in the paragraph in quirks mode. There are also anomalies in Transitional mode, but that falls outside of the scope of this document.

In standards mode, all browsers end the paragraph when the table starts.

text 1

text 2
text 3

Note that when you display this in XHTML mode, the poor browser also has no choice but to put in the table in the paragraph!

Now in standards mode. Show in quirks mode.

Errors in CSS: space in width spec

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.

test

Now in standards mode. Show in quirks mode.

Widths without px

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 IE10 in normal quirks mode) draw a 5 pixel border.

In standards mode, this is not accepted and no browser draws a border.

border 5 solid

Now in standards mode. Show in quirks mode.

Bad property values following good values

Given this HTML:

   <div style="color:cyan; 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.

test

Now in standards mode. Show in quirks mode.

Curly braces in style attribute

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.

test

Now in standards mode. Show in quirks mode.

Width of inline element

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.

span

Now in standards mode. Show in quirks mode.

Hex colours without #

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.

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!

font color 00FF00
999000, 000000
AAA000, A00000

Now in standards mode. Show in quirks mode.

Class names starting with a digit

Given this HTML:

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

test

Now in standards mode. Show in quirks mode.

Unrecognised CSS units

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 margin in the top example. In the bottom example, it uses 8px for top, left and right, and 0 for the bottom margin.

(Note: I used imaginary units here, because real units like vmax 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 standards mode. Show in quirks mode.

And the reverse

Unfortunately, the reverse is also true: browsers can agree on something in quirks mode, but differ in standards mode. For example, given this HTML:

   <a href="#">An anchor <font color="red">with a font</font></a>

In quirks mode, all browsers display the second part of the text and its underline in red.

However, in standards mode, Opera, IE and Firefox make only the text red; they keep the underline in the colour of the a (usually blue).

An anchor with a font

Also, this:

   <table cellpadding="9" border="1">
    <tr><td height="40">40px high table cell</td></tr>
   </table>

In quirks mode, all browsers calculate the height using the border-box model, resulting in a 40px high cell (border to border). In standards mode, most browsers use the content-box model and make all of the cell 60px high. But Konqueror and Opera don't cooperate: they keep the border-box model and make the cell 40px high.

40px 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>
H1H2H3H4
A1A2..4
B1B2B3B..D4
C1C2C3
D1D2D3

Now in standards mode. Show in quirks mode.