index.html

---
title: Mozilla Quirks Mode Behavior
slug: Mozilla/Mozilla_quirks_mode_behavior
tags:
  - CSS
  - Development
  - Layout
  - Web
---
<p>The following is a <em>rough</em>  list of the differences that exist between Mozilla&apos;s <a href="/en-US/docs/Quirks_Mode_and_Standards_Mode">standards mode and quirks mode</a> behavior.</p>

<h2 id="Miscellaneous_Style">Miscellaneous &amp; Style</h2>

<ul>
 <li>All of the style rules in <code><a href="https://dxr.mozilla.org/mozilla-central/source/layout/style/res/quirk.css" rel="custom">layout/style/res/quirk.css</a></code> apply only in quirks mode:
  <ul>
   <li>Orphaned <code>LI</code> has an <code>inside</code> bullet (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1049">bug 1049</a>).</li>
   <li>Add padding if the very first node in an <code>LI</code> is another <code>UL</code> or <code>OL</code> (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=98636">bug 98636</a>).</li>
   <li><span class="obsolete obsoleteInline notecard inline" title="(Firefox 50 / Thunderbird 50 / SeaMonkey 2.47)">Obsolete since Gecko 50</span> List bullets do not inherit the font size of the list (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=97351">bug 97351</a>). Removed in Firefox 50 (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=648331">bug 648331</a>).</li>
   <li>Don&apos;t inherit <code>font</code> properties into tables except for <code>font-family</code>.</li>
   <li>Make <code>TABLE</code> 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 (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=97361">bug 97361</a>).</li>
   <li>Support <code>&lt;PRE wrap&gt;</code>, <code>&lt;PRE cols&gt;</code>, <code>&lt;PRE width&gt;</code>.</li>
   <li>Orphaned <code>DD</code> has generated content <code>:before</code> instead of <code>margin</code> (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=5119">bug 5119</a>).</li>
   <li>Indent nested <code>DL</code> elements (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=8749">bug 8749</a>).</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> (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=58899">bug 58899</a>).</li>
   <li>Residual style tags&apos; size info does not take precedence over heading tags&apos; size (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=77352">bug 77352</a>).</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>(<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=41806">bug 41806</a>).</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>The CSS parser interprets unitless numbers as <code>px</code> (except for <code><a href="/en-US/docs/Web/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 (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=99554">bug 99554</a>). This behavior is being removed in Firefox 27, for interoperability. (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=915053">bug 915053</a>)</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 (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=9258">bug 9258</a>).<br>
  <span class="obsolete obsoleteInline notecard inline" title="(Firefox 35 / Thunderbird 35 / SeaMonkey 2.32)">Obsolete since Gecko 35</span> (Firefox 35.0 / Thunderbird 35.0 / SeaMonkey 2.32) (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=95530">bug 95530</a>) <strong>This quirk is now HTML5 conform and has been adopted in standards mode.</strong></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>)  (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=211030">bug 211030</a>).</li>
 <li>HTML (1-7) and CSS (<code>xx-small</code> - <code>xx-large</code>) font sizes are calculated slightly differently (see <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=18136">bug 18136</a>).</li>
 <li>The <code>:hover</code> and <code>:active</code> pseudo-classes will only be applied to links, and only if there is no other pseudo-class in the selector. To match other elements, the selector must include a tag name, id, class or attribute.<br>
  Prior to Gecko 6.0 (Firefox 6.0 / Thunderbird 6.0 / SeaMonkey 2.3), 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.<br>
  Prior to Gecko 36, it also applied to images, and form controls but the quirk has been adapted to match the behavior of other browser (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=783213">bug 783213</a>).<br>
  Prior to Gecko 36, the quirk was also applied if another pseudo-class was used in the same selector, if a pseudo-element was used in the selector, or if it was part of a pseudo-class argument (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=783213">bug 783213</a>).</li>
 <li>Quirks mode has <code>document.all</code> support (undetected).</li>
 <li>Images (<code>IMG</code> elements) without <code>alt</code> attributes sometimes display placeholder icons in quirks mode.</li>
 <li><span class="obsolete obsoleteInline notecard inline" title="(Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1)">Obsolete since Gecko 2.0</span> HTML colors were parsed differently up to Gecko 1.9.2 (Firefox 3.6 / Thunderbird 3.1 / Fennec 1.0) (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=121738">bug 121738</a>).</li>
 <li>In quirks mode, the URL fragment<code> #top </code>scrolls to the top of the page when there is no such anchor.<br>
  <span class="obsolete obsoleteInline notecard inline" title="(Firefox 10.0 / Thunderbird 10.0 / SeaMonkey 2.7)">Obsolete since Gecko 10.0</span> However, HTML5 requires this behavior, and starting in Gecko 10.0 (Firefox 10.0 / Thunderbird 10.0 / SeaMonkey 2.7), this also works in standards mode (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=80784">bug 80784</a>, <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=93077">bug 93077</a>).</li>
</ul>

<h2 id="Block_and_Inline_layout">Block and Inline layout</h2>

<ul>
 <li><strong>[This quirk is present in <a href="/en-US/docs/Mozilla/Gecko_Almost_Standards_Mode">almost standards mode</a>.]</strong> Line height (not <code>line-height</code>) calculations are different to fix <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=5821">bug 5821</a> and <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=24186">bug 24186</a> (some other issues are described in <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=22274">bug 22274</a>).  See <a href="/en-US/docs/Mozilla/Gecko_Almost_Standards_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 &quot;work&quot; (the way they did in Netscape Navigator 4), even though CSS says that percentage heights should behave like &apos;auto&apos; heights when the parent element doesn&apos;t have a fixed height. See <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=33443#c9">bug 33443#c9</a>. See also <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=41656">bug 41656</a> and its duplicates. Some of these quirks may cause other effects (see <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=54119">bug 54119</a>).</li>
 <li>In quirks mode, the <code>FONT</code> element changes the color of text decorations specified on ancestor elements.<br>
  Proposed to apply in all modes: <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=747517">bug 747517</a>.</li>
 <li>In quirks mode, <code><a href="/en/CSS/text-decoration">text-decoration</a></code> is propagated into floating and absolutely positioned elements.</li>
 <li> (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1) In quirks mode, <code><a href="/en/CSS/text-decoration">text-decoration</a></code> is <em>not</em>  propagated into tables (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=572713">bug 572713</a>).</li>
 <li>maybe  (Firefox 3) 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>
 <li><span class="obsolete obsoleteInline notecard inline" title="(Firefox 8.0 / Thunderbird 8.0 / SeaMonkey 2.5)">Obsolete since Gecko 8.0</span> Prior to Gecko 8.0 (Firefox 8.0 / Thunderbird 8.0 / SeaMonkey 2.5) <code><a href="/en-US/docs/Web/CSS/text-decoration">text-decoration</a></code> in quirks mode had line thickness and position adjusted on descendant text to match the descendant.</li>
</ul>

<h2 id="Tables">Tables</h2>

<ul>
 <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 <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=70831">bug 70831</a>). <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><span class="obsolete obsoleteInline notecard inline" title="(Firefox 37 / Thunderbird 37 / SeaMonkey 2.34)">Obsolete since Gecko 37</span> The <a href="/en-US/docs/Web/CSS/empty-cells"><code>empty-cells</code></a> property defaulted to <code>hide</code> in quirks mode but <code>show</code> (according to CSS2.1) in standards mode (see <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=33244">bug 33244</a>) (though the correct fix would be to specify it on the HTML <code>TABLE</code> element in <code>quirk.css</code>). This quirk has been removed in Firefox 37 and <code>empty-cells</code> also defaults to <code>show</code> in quirks mode (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1020400">bug 1020400</a>).</li>
 <li>In quirks mode floated tables never move to the next &quot;line&quot; if they don&apos;t fit next to other floats, they just keep widening the page (see <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=43086">bug 43086</a>).  To correspond, their width is computed as though only the remaining available space is the containing block width (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=99461">bug 99461</a>).</li>
 <li>In quirks mode <code>colspan=&quot;0&quot;</code> and <code>rowspan=&quot;0&quot;</code> are intentionally not handled as described in HTML4 (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=9879">bug 9879</a>).</li>
 <li><code>hspace</code> and <code>vspace</code> are supported on <code>TABLE</code> only in quirks mode (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=41893">bug 41893</a>).<br>
  Proposed to remove: <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=725646">bug 725646</a>.</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&apos;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 (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=277232">bug 277232</a>).</li>
 <li>In quirks mode, tables with no rows/rowgroups have zero height even when a height is specified (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=241161">bug 241161</a>).</li>
 <li>Something about the overhanging border (i.e., the half of the border that&apos;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 <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=248239">bug 248239</a>, 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>
 <li> (Firefox 16 / Thunderbird 16 / SeaMonkey 2.13) Since this version <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=338554">bug 338554</a> is fixed and <code>(-moz-)box-sizing </code>applies to table cells in standards mode, but quirks mode keeps the old behavior.</li>
 <li><span class="obsolete obsoleteInline notecard inline" title="(Firefox 3)">Obsolete since Gecko 1.9</span> (Firefox 3) In quirks mode table cells with a border have a minimum width of one pixel.</li>
 <li><span class="obsolete obsoleteInline notecard inline" title="(Firefox 3)">Obsolete since Gecko 1.9</span> (Firefox 3) The basic table layout strategy ignores padding (on what) in quirks mode.</li>
 <li><span class="obsolete obsoleteInline notecard inline" title="(Firefox 3)">Obsolete since Gecko 1.9</span> (Firefox 3) The basic table layout strategy handles widths differently in some way.</li>
 <li><span class="obsolete obsoleteInline notecard inline" title="(Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1)">Obsolete since Gecko 2.0</span> (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1) 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>).<br>
  Removed in <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=559834">bug 559834</a> and <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=573322">bug 573322</a>, though <code>middle</code> and <code>absmiddle</code> in table cells work in all modes now.</li>
 <li>In quirks mode, percentage values are supported on the <code>cellspacing</code> attribute, but treated as pixels (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=106336">bug 106336</a>).<br>
  <span class="obsolete obsoleteInline notecard inline" title="(Firefox 13.0 / Thunderbird 13.0 / SeaMonkey 2.10)">Obsolete since Gecko 13.0</span> (Firefox 13.0 / Thunderbird 13.0 / SeaMonkey 2.10) This quirk has been adopted in standards mode now.</li>
</ul>

<h2 id="Frames">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 <code>FRAMESET</code> <code>cols</code>/<code>rows</code> specification <code>0*</code> is treated as <code>1*</code> (see <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=40383">bug 40383</a>).</li>
 <li><span class="obsolete obsoleteInline notecard inline" title>Obsolete</span> The <code>scrolling</code> attribute on <code>FRAME</code> is handled differently.</li>
</ul>

<h2 id="HTML_Parser">HTML Parser</h2>

<ul>
 <li>In quirks mode, we parsed HTML comments in a non-SGML way compatible with other browsers instead of treating &quot;--&quot; as the comment start and end delimiter.<br>
  <span class="obsolete obsoleteInline notecard inline" title="(Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1)">Obsolete since Gecko 2.0</span> (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1) <strong>This quirk is now HTML5 conform and has been adopted in standards mode.</strong></li>
</ul>

<div class="originaldocinfo">
<h3 id="Original_Document_Information" name="Original_Document_Information">Original Document Information</h3>

<ul>
 <li>Author(s): David Baron, Boris Zbarsky</li>
</ul>
</div>

<h3 id="See_also">See also</h3>

<p><a href="/en/Quirks_Mode_and_Standards_Mode" title="en/Mozilla&apos;s_Quirks_Mode">Mozilla&apos;s Quirks Mode</a></p>