+Group: WHATWG +Status: RD +Date: 2025-08-18 +H1: Quirks Mode +Shortname: quirks +Text Macro: TWITTER quirksstandard +Text Macro: LATESTRD 2025-08 +Abstract: Quirks Mode defines quirks in CSS and Selectors that are necessary to support for Web browsers for compatibility with the Web. +Translation: zh-Hans https://htmlspecs.com/quirks/ +Translation: ja https://jp.htmlspecs.com/quirks/ +Translation: ko https://ko.htmlspecs.com/quirks/ ++ +
+{
+ "INTRINSIC": {
+ "authors": [ "David Baron" ],
+ "href": "https://dbaron.org/css/intrinsic/",
+ "title": "More Precise Definitions of Intrinsic Widths and Table Layout (Proposal)"
+ }
+}
+
+
++urlPrefix: https://drafts.csswg.org/css2/; spec:css2 + urlPrefix: visuren.html + type: dfn; text: block container element + urlPrefix: conform.html + type: dfn; text: illegal + type: dfn; text: replaced element + urlPrefix: box.html + type: dfn; text: border box; url: #border-edge + type: dfn; text: content box; url: #content-edge +urlPrefix: https://dbaron.org/css/intrinsic/ + type: dfn; + text: min-content width of an inline formatting context; url: #inline-intrinsic-min + text: outer min-content width of a table cell; url: #autotable ++ +
+spec:css-sizing-3 + type:property; text:box-sizing + type:value; for:box-sizing; text:border-box + type:value; for:width; text:auto + type:value; for:height; text:auto + type:property; text:min-height + type:property; text:max-height +spec:css-tables-3 + type:property; text:border-spacing +spec:css-color-4 + type:property; text:color +spec:cssom-1 + type:interface; text:CSS +spec:selectors-4; + type:selector; text::active + type:selector; text::hover + type:dfn; text:type selector +spec:css-page-floats-3 + type:value; text:none +spec:css-backgrounds-3 + type:property; text:border-top-width + type:property; text:border-bottom-width + type:property; text:border-right-width + type:property; text:border-left-width + type:property; text:border-style +spec:css-box-4 + type:property; text:padding-top + type:property; text:padding-bottom + type:property; text:padding-right + type:property; text:padding-left + type:property; text:margin-left + type:property; text:margin-right + type:property; text:margin-top + type:property; text:margin-bottom +spec:css-cascade-5 + type:dfn; text:used value + type:dfn; text:computed value +spec:css-position-3 + type:property; text:position +spec:css-display-4 + type:property; text:display + type:dfn; text:containing block + type:dfn; text:initial containing block +spec:html + type:element; text:body ++ + + + +
Browsers have several rendering modes to render HTML documents. The reason for this is basically +a historical accident. The CSS specification was incompatible with the behavior of existing browsers +which existing Web content relied on. In order to comply with the specification while not breaking +existing content, browsers introduced a new rendering mode (no-quirks mode). Some browsers still had +the shrink-wrapping behavior for images in table cells in their no-quirks mode, and sites started +relying on that, so browsers that implemented the specification's behavior introduced a third mode +(limited-quirks mode). In hindsight, it would have been better to make the default CSS behavior be +compatible with what the existing content relied on and providing opt-ins to different behavior. The +different modes have since gained a few differences outside of CSS. + + +
Create a specification for rendering old (or indeed new, if they happen to have a particular + pragma) HTML documents. + +
The HTML specification defines + when a document is set to quirks mode, limited-quirks mode or no-quirks mode. + [[HTML]] + +
Remove quirks from implementations that are not needed for Web compatibility. + +
For example, Gecko has removed a quirk about list
+ item bullet size, and Chromium has removed a quirk
+ where display was forced to table or inline-table on table elements.
Get interoperability on quirks that are needed for Web compatibility. + +
For example, Gecko aligned their implementation of + the :active and :hover quirk with this specification and thereby achieved closer + interoperability with other browsers. + +
Where possible, limit quirks to a fixed set of legacy features so they don't propagate into + new features. + +
For example, [[#the-hashless-hex-color-quirk]] is limited to a fixed + set of CSS properties so that the quirk does not apply in SVG features that also accept colors, or in CSS gradients where the grammar could + otherwise become ambiguous. + +
This specification does not enumerate all quirks that currently exist in browsers. A +number of quirks are specified in HTML, DOM, CSSOM and CSSOM View. [[HTML]] [[DOM]] [[CSSOM]] +[[CSSOM-VIEW]] If a quirk is not specified anywhere, it is probably due to the second bullet point +above. + + +
All diagrams, examples, and notes in this specification are non-normative, as are all sections +explicitly marked non-normative. Everything else in this specification is normative. + +
The key words "MUST", "MUST NOT", "REQUIRED", "SHOULD", "SHOULD NOT", "RECOMMENDED", "NOT +RECOMMENDED", "MAY", and "OPTIONAL" in the normative parts of this specification are to be +interpreted as described in RFC2119. For readability, these words do not appear in all uppercase +letters in this specification. [[!RFC2119]] + + +
When this specification refers to a "|foo| element", it means an element with the
+local name |foo| and having the namespace http://www.w3.org/1999/xhtml.
+
+
When this specification refers to a "|foo| attribute", it means an attribute with
+the local name |foo| and having no namespace.
+
+
The document's body element is the first child of the document element that is a <{body}> element, if there is one, and the document element is an <{html}> element. Otherwise it is null. + +
The document's body element is different from HTML's the body +element, since the latter can be a <{frameset}> element. + + +
See [[CSS-COLOR-4#quirky-color]].
+ + +See [[CSS-VALUES-4#deprecated-quirky-length]].
+ + +In quirks mode and limited-quirks mode, an inline box that +matches all of the following conditions, must, for the purpose of line height calculation, act as +if the box had a 'line-height' of zero. + +
The 'border-top-width', 'border-bottom-width', 'padding-top' and 'padding-bottom' properties + have a used value of zero and the box has a vertical writing mode, or the + 'border-right-width', 'border-left-width', 'padding-right' and 'padding-left' properties have a + used value of zero and the box has a horizontal writing mode. + + + +
It either contains no text or it contains only collapsed whitespace. + + + + + +
In quirks mode and limited-quirks mode, for a block container +element whose content is composed of inline-level elements, the element's 'line-height' +must be ignored for the purpose of calculating the minimal height of line boxes within the element. + +
This means that the "strut" is not created.
+ + +In quirks mode, for the purpose of calculating the 'height' of an element
+|element|, if the computed value of the 'position' property of |element| is
+''position/relative'' or ''position/static'', the specified value for the 'height' property of
+|element| is a < Let |element| be the nearest ancestor containing block of |element|, if there is
+ one. Otherwise, return the initial containing block.
+
+ If |element| has a computed value of the 'display' property that is
+ ''display/table-cell'', then return a UA-defined value.
+
+ If |element| has a computed value of the 'height' property that is not
+ ''height/auto'', then return |element|.
+
+ If |element| has a computed value of the 'position' property that is
+ ''position/absolute'', or if |element| is a not a block container or a
+ table wrapper box, then return |element|.
+
+ Jump to the first step.
+
+ It is at the time or writing undefined how percentage heights inside tables work in
+CSS. This specification does not try to specify what to use as the containing block for calculating
+percentage heights in tables. Godspeed!
+
+ This quirk needs to take writing modes into account. In quirks mode, if the document element |element| matches all of
+the following conditions:
+
+ |element| is an <{html}> element.
+
+ The computed value of the 'width' property of |element| is ''width/auto'' and
+ |element| has a vertical writing mode, or the computed value of the 'height' property
+ of |element| is ''height/auto'' and |element| has a horizontal writing mode.
+ [[!CSS-WRITING-MODES-3]]
+
+ ...then |element| must have its border box size in the block flow direction set
+using the following algorithm:
+
+ Let |margins| be sum of the used values of the 'margin-left' and 'margin-right'
+ properties of |element| if |element| has a vertical writing mode, otherwise let |margins| be
+ the sum of the used values of the 'margin-top' and 'margin-bottom' properties of |element|.
+
+ Let |size| be the size of the initial containing block in the block flow
+ direction minus |margins|.
+
+ Return the bigger value of |size| and the normal border box size the element would
+ have according to the CSS specification.
+
+ In quirks mode, if the document's body element |body| is not null and if
+it matches all of the following conditions:
+
+ The computed value of the 'width' property of |body| is ''width/auto'' and |body| has
+ a vertical writing mode, or the computed value of the 'height' property of |body| is
+ ''height/auto'' and |body| has a horizontal writing mode. [[!CSS-WRITING-MODES-3]]
+
+ The computed value of the 'position' property of |body| is not ''position/absolute''
+ or ''position/fixed''.
+
+ The computed value of the 'float' property of |body| is ''float/none''.
+
+ |body| is not an inline-level element.
+
+ |body| is not a multi-column spanning element. [[!CSS3-MULTICOL]]
+
+ ...then |body| must have its border box size in the block flow direction set using
+the following algorithm:
+
+ Let |margins| be the sum of the used values of the 'margin-left' and 'margin-right'
+ properties of |body| if |body| has a vertical writing mode, otherwise let |margins| be the
+ sum of the used values of the 'margin-top' and 'margin-bottom' properties of |body|.
+
+ Let |size| be the size of |body|'s parent element's content box in the block flow
+ direction minus |margins|.
+
+ Return the bigger value of |size| and the normal border box size the element would
+ have according to the CSS specification.
+
+ What should happen if the <{html}> and the <{body}> have different writing modes?
+
+
+ In quirks mode, for the purpose of calculating the min-content width of an
+inline formatting context for which a table cell |cell| is the containing block, if
+|cell| has a computed value of the 'width' property that is ''width/auto'', <{img}> elements
+that are inline-level replaced elements in that inline formatting context must
+not have a soft wrap opportunity before or after them. [[!CSS-TEXT-3]] [[!INTRINSIC]] In quirks mode, an element |cell| that matches all of the following conditions
+must act as if it had an outer min-content width of a table cell in the automatic table
+layout algorithm that is the bigger value of |cell|'s computed value of the 'width' property
+and the outer min-content width of a table cell. [[!INTRINSIC]]
+
+ |cell| is a <{td}> element or a <{th}> element.
+
+ |cell| has a The computed value of the 'width' property of |cell| is a < In quirks mode, an element |table| that matches all of the following conditions
+must have a used value of the 'height' property of ''0'' and a used value of the
+'border-style' property of ''border-style/none''.
+
+ |table| has a computed value of the 'display' property that is ''display/table''.
+
+ |table| has no child ''display/table-row-group'', ''display/table-header-group'',
+ ''display/table-footer-group'' or ''display/table-caption'' box.
+
+ |table| has no child ''display/table-column-group'' box that itself has a child
+ ''display/table-column'' box.
+
+ In quirks mode, text decoration must not propagate
+into <{table}> elements. In quirks mode, the initial value of the 'color'
+property must be ''quirk-inherit'', a special value that has no keyword mapping to it.
+
+ The computed value of the 'color' property of an element |element| must be calculated
+using the following algorithm:
+
+ If the specified value of the 'color' property of |element| is not
+ ''quirk-inherit'', jump to the last step.
+
+ If |element| is not a <{table}> element, jump to the last step.
+
+ If the document's body element is null, jump to the last step.
+
+ Return the used value of the 'color' property of the document's body element.
+ Abort these steps.
+
+ If the specified value of the 'color' property of |element| is ''quirk-inherit'', let the
+ specified value of the 'color' property of |element| be the initial value of the 'color' property
+ according to the CSS specification. Return the computed value of the 'color' property of
+ |element| as specified in the CSS specification.
+
+ In quirks mode, elements that have a computed value of the 'display'
+property of ''display/table-cell'' must act as they have used value of the 'box-sizing'
+property of ''box-sizing/border-box'', but only for the purpose of the 'height', 'min-height' and
+'max-height' properties.
+
+
+ In quirks mode, a compound selector |selector| that matches all of the
+following conditions must not match elements that would not also match the '':any-link'' selector.
+[[!SELECTORS4]]
+
+ |selector| uses the '':active'' or '':hover'' pseudo-classes.
+
+ |selector| does not use a type selector.
+
+ |selector| does not use an attribute selector.
+
+ |selector| does not use an ID selector.
+
+ |selector| does not use a class selector.
+
+ |selector| does not use a pseudo-class selector other than '':active'' and
+ '':hover''.
+
+ |selector| does not use a pseudo-element selector.
+
+ |selector| is not part of an argument to a functional pseudo-class or
+ pseudo-element.
+
+ There are no known security or privacy impacts in this specification. Thanks to
+Anne van Kesteren,
+Boris Zbarsky,
+Chris Rebert,
+Dan Mulvey,
+David Baron,
+Kang-Hao Lu,
+Ms2ger,
+Simon Sapin,
+and
+Tab Atkins
+for their useful comments.
+
+ Special thanks to Boris Zbarsky and David Baron for documenting Mozilla's
+quirks in MDN.
+
+ This standard is written by Simon Pieters (Mozilla, zcorpan@gmail.com).
+
+
+
+The <{html}> element fills the viewport
+quirk
+
+
+
+
+
+
+
+
+
+
+The <{body}> element fills the <{html}> element
+quirk
+
+
+
+
+
+
+
+
+
+The table cell width calculation quirk
+
+The table cell nowrap minimum width
+calculation quirk
+
+
+
+
+
+
+nowrap attribute.
+
+ The collapsing table quirk
+
+
+
+
+
+
+The text decoration doesn't propagate
+into tables quirk
+
+The tables inherit color from body
+quirk
+
+
+
+
+
+
+
+
+
+The table cell height box sizing quirk
+
+Selectors
+
+The :active and :hover quirk
+
+
+
+
+
+
+Security and Privacy Considerations
+
+Acknowledgments
+
+