Mozilla Quirks Mode Behavior

  • Revision slug: Mozilla_Quirks_Mode_Behavior
  • Revision title: Mozilla Quirks Mode Behavior
  • Revision id: 237998
  • Created:
  • Creator: Jürgen Jeka
  • Is current revision? No
  • Comment removing more FORM quirks (obsolete before Gecko1.7/Firefox1); 34 words added, 78 words removed

Revision Content

The following is a rough list of the differences that exist between Mozilla's standards mode and quirks mode behavior.

Miscellaneous & Style

  • All of the style rules in {{ Source("layout/style/quirk.css") }} apply only in quirks mode:
    • Orphaned LI has an inside bullet ({{ bug("1049") }}).
    • Add padding if the very first node in an LI is another UL or OL ({{ bug("38832") }}).
    • List bullets do not inherit the font size of the list ({{ bug("97351") }}).
    • Don't inhertit font properties into tables except for font-family.
    • Make table borders gray rather than using the foreground color.
    • Collapse top margin of BODY and TD and bottom margin of TD.
    • Collapse the bottom or top margins of empty elements ({{ bug("97361") }}).
    • Support pre[wrap], pre[cols], pre[width].
    • Orphaned DD has generated content :before instead of margin ({{ bug("5119") }}).
    • Indent nested DL elements ({{ bug("8749") }}).
    • MAP acts like an inline, not a block.
    • Give floated IMG a 3px margin ({{ bug("58899") }}).
    • Residual style tags' size info does not take precedence over heading tags' size ({{ bug("77352") }}).
    • Use box-sizing:border-box for most INPUT types and TEXTAREA.
    • Give FORM a margin-bottom:1em ({{ bug("41806") }}).
  • In quirks mode css class and id names are case insensitive. In standards mode they are case sensitive.  (This also applies to getElementsByClassName.)
  • Stylesheets linked in the document with an advisory mime type of text/css will still be treated as CSS even if the server gives a Content-Type header other than text/css.
  • The CSS parser accepts colors not beginning with #, except in shorthands.
  • {{ obsolete_inline("1.9.2") }} HTML colors were parsed differently up to Gecko 1.9.2 {{ geckoRelease("1.9.2") }} ({{ Bug("121738") }}).  
  • The CSS parser interprets unitless numbers as px (except for line-height and any other properties where they have distinct meaning, and except in shorthands).
  • In quirks mode, the CSS parser allows {} around the contents of style attributes ({{ Bug("99554") }}).
  • An empty string for the background attribute sets the background URL to empty only in quirks mode.
  • The topmargin, bottommargin, leftmargin, and rightmargin attributes on BODY are supported only in quirks mode ({{ bug("9258") }}).
  • The scrollLeft, scrollTop, scrollWidth, and scrollHeight properties are relative to BODY in quirks mode (instead of HTML)  ({{ Bug("211030") }}).
  • {{ obsolete_inline("10.0") }} In quirks mode, the URL fragment #top scrolls to the top of the page when there is no such anchor.  However, HTML5 requires this behavior, and starting in Gecko 10.0 {{ geckoRelease("10.0") }}, this always works, even when not in quirks mode ({{ Bug("80784") }}, {{ Bug("93077") }}).
  • HTML (1-7) and CSS (xx-small - xx-large) font sizes are calculated slightly differently (see {{ Bug("18136") }}).
  • The :hover pseudoclass will only be applied to links, images, and form controls, unless the selector includes tag names, ids, or attributes.
  • {{ obsolete_inline("6.0") }} The :hover and :active pseudoclasses only match links and form controls when the part of the selector they are part of does not have a tag name, id, or class. (Prior to Gecko 6.0 {{ geckoRelease("6.0") }}, there was no class check, so the :hover pseudoclass was not applied to class selectors; for example, .someclass:hover did not work.)
  • Undetected document.all support.
  • Images (IMG elements) without alt attributes sometimes display placeholder icons in quirks mode.

Block and Inline layout

  • [This quirk is present in almost standards mode.] Line height (not line-height) calculations are different to fix {{ Bug("5821") }} and {{ Bug("24186") }} (some other issues are described in {{ Bug("22274") }}).  See almost standards mode for more details.
  • There are a bunch of quirks to get percentage heights on images, tables, objects, and applets (etc.?) to "work" (the way they did in Netscape Navigator 4), even though CSS says that percentage heights should behave like 'auto' heights when the parent element doesn't have a fixed height. See {{ Bug("33443#c9") }}. See also {{ Bug("41656") }} and its duplicates. Some of these quirks may cause other effects (see {{ Bug("54119") }}).
  • {{ obsolete_inline("8.0") }} Prior to Gecko 8.0 {{ geckoRelease("8.0") }} text-decoration in quirks mode had line thickness and position adjusted on descendant text to match the descendant.
  • In quirks mode, the font element changes the color of text decorations specified on ancestor elements.
  • In quirks mode, text-decoration is propagated into floating and absolutely positioned elements.
  • {{ gecko_minversion_inline("2.0") }} {{ geckoRelease("2.0") }} In quirks mode, text-decoration is not propagated into tables ({{ Bug("572713") }}).
  • maybe {{ gecko_minversion_inline("1.9") }} {{ geckoRelease("1.9") }} When computing the minimum intrinsic width of an inline flow directly in a table cell (no blocks in between), it is assumed that it is not possible to break before and after an image (when otherwise it would be).

Tables

  • {{ obsolete_inline("2.0") }} In quirks mode absmiddle (handled incorrectly?) and middle (perhaps incorrectly as well?) are accepted as values of align on table cells, and absmiddle, abscenter, and middle are supported on tables (treated the same as center). (removed in {{ Bug("559834") }} and {{ Bug("573322") }}, though middle and absmiddle in td now work in all modes)
  • TD, TH, TR, THEAD, TBODY, and TFOOT elements have the document background (and color?) applied to them (when the document background is specified in certain ways?) (see also {{ Bug("70831") }}). [This may have been an accurate description when written in June 2001, but no longer appears accurate. Should look into TableQuirkColorRule, re-describe, and figure out when it changed.]
  • The empty-cells property defaults to hide in quirks mode but show (according to CSS2.1) in standards mode (see {{ Bug("33244") }}) (though the correct fix would be to specify it on the HTML TABLE element in quirk.css).
  • In quirks mode floated tables never move to the next "line" if they don't fit next to other floats, they just keep widening the page (see {{ Bug("43086") }}).  To correspond, their width is computed as though only the remaining available space is the containing block width ({{ Bug("99461") }}).
  • In quirks mode colspan="0" and rowspan="0" are intentionally not handled as described in HTML4 ({{ bug("9879") }}).
  • hspace and vspace are supported on TABLE only in quirks mode.
  • In quirks mode, when tables have a border style of inset or outset, the border color is based on the background color of the table or of the nearest ancestor with non-transparent background. [This may have been an accurate description when written in June 2001, but it no longer appears correct. I don't follow the code in nsCSSRenderingBorders well enough to tell, though.]
  • In quirks mode a fixed width specified on a table cell resets the nowrap attribute. If the nowrap attribute is present the cell width will never be smaller than the specified fixed width ({{ Bug("277232") }}).
  • {{ obsolete_inline("1.9") }} {{ geckoRelease("1.9") }} In quirks mode table cells with a border have a minimum width of one pixel.
  • {{ obsolete_inline("1.9") }} {{ geckoRelease("1.9") }} The basic table layout strategy ignores padding (on what) in quirks mode.
  • {{ obsolete_inline("1.9") }} {{ geckoRelease("1.9") }} The basic table layout strategy handles widths differently in some way.
  • In quirks mode, percentage values are supported on the cellspacing attribute, but treated as pixels ({{ bug("106336") }}). Starting in Gecko 13.0 {{ geckoRelease("13.0") }}, this is how it's done outside quirks mode as well.
  • In quirks mode, tables with no rows/rowgroups have zero height even when a height is specified ({{ Bug("241161") }}).
  • Something about the overhanging border (i.e., the half of the border that's outside the border-box) in border-collapse tables differs between quirks mode and standards mode. [See nsTableFrame::GetDeflationForBackground and figure out what really differs, and when it started differing.]
  • Gecko had {{ bug("248239") }}, where table cells acted as they had box-sizing:border-box applied for the purpose of the height property. This is fixed in Gecko 16 (Firefox 16) for standards mode but remains in quirks mode for compatibility with quirks mode behavior of other browsers.

Frames

  • In quirks mode marginwidth and marginheight on a FRAME are propagated to the contained BODY.
  • In a frame size specification 0* is treated as 1* (see {{ Bug("40383") }}).
  • {{ obsolete_inline("????") }} The scrolling attribute on FRAME is handled differently.

HTML Parser

  • In quirks mode, we parse HTML comments in a way compatible with older browsers instead of treating "--" as the comment start and end delimiter. [This quirk has been adopted in standards mode {{ Gecko_minversion_inline("2.0") }} {{ geckoRelease("2.0") }} ]

Original Document Information

  • Author(s): David Baron, Boris Zbarsky

See also

Mozilla's Quirks Mode

{{ languages( { "fr": "fr/Comportement_du_mode_quirks_de_Mozilla", "ja": "ja/Mozilla_Quirks_Mode_Behavior" } ) }}

Revision Source

<p>The following is a <em>rough</em> list of the differences that exist between Mozilla's standards mode and quirks mode behavior.</p>
<h2>Miscellaneous &amp; Style</h2>
<ul> <li>All of the style rules in {{ Source("layout/style/quirk.css") }} apply only in quirks mode: <ul> <li>Orphaned <code>LI</code> has an <code>inside</code> bullet ({{ bug("1049") }}).</li> <li>Add padding if the very first node in an <code>LI</code> is another <code>UL</code> or <code>OL</code> ({{ bug("38832") }}).</li> <li>List bullets do not inherit the font size of the list ({{ bug("97351") }}).</li> <li>Don't inhertit <code>font</code> properties into tables except for <code>font-family</code>.</li> <li>Make table borders gray rather than using the foreground color.</li> <li>Collapse top margin of <code>BODY</code> and <code>TD</code> and bottom margin of <code>TD</code>.</li> <li>Collapse the bottom or top margins of empty elements ({{ bug("97361") }}).</li> <li>Support <code>pre[wrap]</code>, <code>pre[cols]</code>, <code>pre[width]</code>.</li> <li>Orphaned <code>DD</code> has generated content <code>:before</code> instead of <code>margin</code> ({{ bug("5119") }}).</li> <li>Indent nested <code>DL</code> elements ({{ bug("8749") }}).</li> <li><code>MAP</code> acts like an <code>inline</code>, not a <code>block</code>.</li> <li>Give floated <code>IMG</code> a 3px <code>margin</code> ({{ bug("58899") }}).</li> <li>Residual style tags' size info does not take precedence over heading tags' size ({{ bug("77352") }}).</li> <li>Use<code> box-sizing:border-box </code>for most <code>INPUT</code> types and <code>TEXTAREA</code>.</li> <li>Give <code>FORM</code> a <code> margin-bottom:1em </code>({{ bug("41806") }}).</li> </ul> </li> <li>In quirks mode css <code>class</code> and <code>id</code> names are case insensitive. In standards mode they are case sensitive.  (This also applies to <code>getElementsByClassName</code>.)</li> <li>Stylesheets linked in the document with an advisory mime type of <code>text/css</code> will still be treated as CSS even if the server gives a <code>Content-Type</code> header other than <code>text/css</code>.</li> <li>The CSS parser accepts colors not beginning with <code>#</code>, except in shorthands.</li> <li>{{ obsolete_inline("1.9.2") }} HTML colors were parsed differently up to Gecko 1.9.2 {{ geckoRelease("1.9.2") }} ({{ Bug("121738") }}).  </li> <li>The CSS parser interprets unitless numbers as <code>px</code> (except for <code><a href="/en/CSS/line-height" title="en/CSS/line-height">line-height</a></code> and any other properties where they have distinct meaning, and except in shorthands).</li> <li>In quirks mode, the CSS parser allows {} around the contents of style attributes ({{ Bug("99554") }}).</li> <li>An empty string for the <code>background</code> attribute sets the background URL to empty only in quirks mode.</li> <li>The <code>topmargin</code>, <code>bottommargin</code>, <code>leftmargin</code>, and <code>rightmargin</code> attributes on <code>BODY</code> are supported only in quirks mode ({{ bug("9258") }}).</li> <li>The <code>scrollLeft</code>, <code>scrollTop</code>, <code>scrollWidth</code>, and <code>scrollHeight</code> properties are relative to <code>BODY</code> in quirks mode (instead of <code>HTML</code>)  ({{ Bug("211030") }}).</li> <li>{{ obsolete_inline("10.0") }} In quirks mode, the URL fragment <code>#top</code> scrolls to the top of the page when there is no such anchor.  However, HTML5 requires this behavior, and starting in Gecko 10.0 {{ geckoRelease("10.0") }}, this always works, even when not in quirks mode ({{ Bug("80784") }}, {{ Bug("93077") }}).</li> <li>HTML (1-7) and CSS (<code>xx-small</code> - <code>xx-large</code>) font sizes are calculated slightly differently (see {{ Bug("18136") }}).</li> <li>The <code>:hover</code> pseudoclass will only be applied to links, images, and form controls, unless the selector includes tag names, ids, or attributes.</li> <li>{{ obsolete_inline("6.0") }} The <code>:hover</code> and <code>:active</code> pseudoclasses only match links and form controls when the part of the selector they are part of does not have a tag name, id, or class. (Prior to Gecko 6.0 {{ geckoRelease("6.0") }}, there was no class check, so the <code>:hover</code> pseudoclass was not applied to class selectors; for example, <code>.someclass:hover</code> did not work.)</li> <li>Undetected <code>document.all</code> support.</li> <li>Images (<code>IMG</code> elements) without <code>alt</code> attributes sometimes display placeholder icons in quirks mode.</li>
</ul>
<h2>Block and Inline layout</h2>
<ul> <li><strong>[This quirk is present in <a href="/en/Gecko's_&quot;Almost_Standards&quot;_Mode" title="en/Gecko's &quot;Almost Standards&quot; Mode">almost standards mode</a>.]</strong> Line height (not <code>line-height</code>) calculations are different to fix {{ Bug("5821") }} and {{ Bug("24186") }} (some other issues are described in {{ Bug("22274") }}).  See <a href="/en/Gecko's_&quot;Almost_Standards&quot;_Mode" title="en/Gecko's &quot;Almost Standards&quot; Mode">almost standards mode</a> for more details.</li> <li>There are a bunch of quirks to get percentage heights on images, tables, objects, and applets (etc.?) to "work" (the way they did in Netscape Navigator 4), even though CSS says that percentage heights should behave like 'auto' heights when the parent element doesn't have a fixed height. See {{ Bug("33443#c9") }}. See also {{ Bug("41656") }} and its duplicates. Some of these quirks may cause other effects (see {{ Bug("54119") }}).</li> <li>{{ obsolete_inline("8.0") }} Prior to Gecko 8.0 {{ geckoRelease("8.0") }} <code><a href="/en/CSS/text-decoration" title="en/CSS/text-decoration">text-decoration</a></code> in quirks mode had line thickness and position adjusted on descendant text to match the descendant.</li> <li>In quirks mode, the <code>font</code> element changes the color of text decorations specified on ancestor elements.</li> <li>In quirks mode, <code><a href="/en/CSS/text-decoration" title="en/CSS/text-decoration">text-decoration</a></code> is propagated into floating and absolutely positioned elements.</li> <li>{{ gecko_minversion_inline("2.0") }} {{ geckoRelease("2.0") }} In quirks mode, <code><a href="/en/CSS/text-decoration" title="en/CSS/text-decoration">text-decoration</a></code> is <em>not</em> propagated into tables ({{ Bug("572713") }}).</li> <li>maybe {{ gecko_minversion_inline("1.9") }} {{ geckoRelease("1.9") }} When computing the minimum intrinsic width of an inline flow directly in a table cell (no blocks in between), it is assumed that it is not possible to break before and after an image (when otherwise it would be).</li>
</ul>
<h2>Tables</h2>
<ul> <li>{{ obsolete_inline("2.0") }} In quirks mode <code>absmiddle</code> (handled incorrectly?) and <code>middle</code> (perhaps incorrectly as well?) are accepted as values of <code>align</code> on table cells, and <code>absmiddle</code>, <code>abscenter</code>, and <code>middle</code> are supported on tables (treated the same as <code>center</code>). (removed in {{ Bug("559834") }} and {{ Bug("573322") }}, though middle and absmiddle in td now work in all modes)</li> <li><code>TD</code>, <code>TH</code>, <code>TR</code>, <code>THEAD</code>, <code>TBODY</code>, and <code>TFOOT</code> elements have the document background (and color?) applied to them (when the document background is specified in certain ways?) (see also {{ Bug("70831") }}). <strong>[This may have been an accurate description when written in June 2001, but no longer appears accurate. Should look into TableQuirkColorRule, re-describe, and figure out when it changed.]</strong></li> <li>The <code>empty-cells</code> property defaults to <code>hide</code> in quirks mode but <code>show</code> (according to CSS2.1) in standards mode (see {{ Bug("33244") }}) (though the correct fix would be to specify it on the HTML <code>TABLE</code> element in <code>quirk.css</code>).</li> <li>In quirks mode floated tables never move to the next "line" if they don't fit next to other floats, they just keep widening the page (see {{ Bug("43086") }}).  To correspond, their width is computed as though only the remaining available space is the containing block width ({{ Bug("99461") }}).</li> <li>In quirks mode <code>colspan="0"</code> and <code>rowspan="0"</code> are intentionally not handled as described in HTML4 ({{ bug("9879") }}).</li> <li><code>hspace</code> and <code>vspace</code> are supported on <code>TABLE</code> only in quirks mode.</li> <li>In quirks mode, when tables have a border style of <code>inset</code> or <code>outset</code>, the border color is based on the background color of the table or of the nearest ancestor with non-transparent background. <strong>[This may have been an accurate description when written in June 2001, but it no longer appears correct. I don't follow the code in nsCSSRenderingBorders well enough to tell, though.]</strong></li> <li>In quirks mode a fixed width specified on a table cell resets the <code>nowrap</code> attribute. If the <code>nowrap</code> attribute is present the cell width will never be smaller than the specified fixed width ({{ Bug("277232") }}).</li> <li>{{ obsolete_inline("1.9") }} {{ geckoRelease("1.9") }} In quirks mode table cells with a border have a minimum width of one pixel.</li> <li>{{ obsolete_inline("1.9") }} {{ geckoRelease("1.9") }} The basic table layout strategy ignores padding (on what) in quirks mode.</li> <li>{{ obsolete_inline("1.9") }} {{ geckoRelease("1.9") }} The basic table layout strategy handles widths differently in some way.</li> <li>In quirks mode, percentage values are supported on the <code>cellspacing</code> attribute, but treated as pixels ({{ bug("106336") }}). Starting in Gecko 13.0 {{ geckoRelease("13.0") }}, this is how it's done outside quirks mode as well.</li> <li>In quirks mode, tables with no rows/rowgroups have zero height even when a height is specified ({{ Bug("241161") }}).</li> <li>Something about the overhanging border (i.e., the half of the border that's outside the border-box) in border-collapse tables differs between quirks mode and standards mode. <strong>[See nsTableFrame::GetDeflationForBackground and figure out what really differs, and when it started differing.]</strong></li> <li>Gecko had {{ bug("248239") }}, where table cells acted as they had<code> box-sizing:border-box </code>applied for the purpose of the<code> height </code>property. This is fixed in Gecko 16 (Firefox 16) for standards mode but remains in quirks mode for compatibility with quirks mode behavior of other browsers.</li>
</ul>
<h2>Frames</h2>
<ul> <li>In quirks mode <code>marginwidth</code> and <code>marginheight</code> on a <code>FRAME</code> are propagated to the contained <code>BODY</code>.</li> <li>In a frame size specification <code>0*</code> is treated as <code>1*</code> (see {{ Bug("40383") }}).</li> <li>{{ obsolete_inline("????") }} The <code>scrolling</code> attribute on <code>FRAME</code> is handled differently.</li>
</ul>
<h2>HTML Parser</h2>
<ul> <li>In quirks mode, we parse HTML comments in a way compatible with older browsers instead of treating "<code>--</code>" as the comment start and end delimiter. <strong>[This quirk has been adopted in standards mode</strong> {{ Gecko_minversion_inline("2.0") }} {{ geckoRelease("2.0") }} <strong>]</strong></li>
</ul>
<div class="originaldocinfo"> <h3 name="Original_Document_Information">Original Document Information</h3> <ul> <li>Author(s): David Baron, Boris Zbarsky</li> </ul>
</div>
<h3>See also</h3>
<p><a href="/en/Quirks_Mode_and_Standards_Mode" title="en/Mozilla's_Quirks_Mode">Mozilla's Quirks Mode</a></p>
<p>{{ languages( { "fr": "fr/Comportement_du_mode_quirks_de_Mozilla", "ja": "ja/Mozilla_Quirks_Mode_Behavior" } ) }}</p>
Revert to this revision