Quirks Mode Standard

Quirks Mode Standard
Quirks Mode
Living Standard — Last Updated
15 March 2026
Participate:
GitHub whatwg/quirks
new issue
open issues
Chat on Matrix
Commits:
GitHub whatwg/quirks/commits
Snapshot as of this commit
@quirksstandard
Tests:
web-platform-tests quirks/
ongoing work
Translations
(non-normative)
简体中文
한국어
Abstract
Quirks Mode defines quirks in CSS and Selectors that are necessary to support for Web browsers for compatibility with the Web.
1.
Introduction
1.1.
History
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.
1.2.
Goals
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,
§ 3.1 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.
2.
Common infrastructure
2.1.
Conformance
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]
2.2.
Terminology
When this specification refers to a "
foo
element", it means an element with the
local name
foo
and having the namespace
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.
3.
CSS
3.1.
The hashless hex color quirk
See
CSS Color 4
§ B Deprecated Quirky Hex Colors
3.2.
The unitless length quirk
See
CSS Values 4
§ C Quirky Lengths
3.3.
The line height calculation quirk
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.
3.4.
The blocks ignore line-height quirk
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.
3.5.
The percentage height calculation
quirk
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
relative
or
static
, the specified value for the
height
property of
element
is a

, and
element
does not have a
computed value
of the
display
property that is
table-row
table-row-group
table-header-group
table-footer-group
table-cell
or
table-caption
, the
containing block
of
element
must be calculated using the following algorithm, aborting on
the first step that returns a value:
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
table-cell
, then return a UA-defined value.
If
element
has a
computed value
of the
height
property that is not
auto
, then return
element
If
element
has a
computed value
of the
position
property that is
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.
3.6.
The
html
element fills the viewport
quirk
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
auto
and
element
has a
vertical writing mode
, or the
computed value
of the
height
property
of
element
is
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.
3.7.
The
body
element fills the
html
element
quirk
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
auto
and
body
has
vertical writing mode
, or the
computed value
of the
height
property of
body
is
auto
and
body
has a
horizontal writing mode
[CSS-WRITING-MODES-3]
The
computed value
of the
position
property of
body
is not
absolute
or
fixed
The
computed value
of the
float
property of
body
is
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?
3.8.
The table cell width calculation quirk
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
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]
3.9.
The table cell nowrap minimum width
calculation quirk
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
nowrap
attribute.
The
computed value
of the
width
property of
cell
is a

that is not
zero.
3.10.
The collapsing table quirk
In
quirks mode
, an element
table
that matches all of the following conditions
must have a
used value
of the
height
property of
and a
used value
of the
border-style
property of
none
table
has a
computed value
of the
display
property that is
table
table
has no child
table-row-group
table-header-group
table-footer-group
or
table-caption
box.
table
has no child
table-column-group
box that itself has a child
table-column
box.
3.11.
The text decoration doesn’t propagate
into tables quirk
In
quirks mode
, text decoration must not propagate
into
table
elements.
3.12.
The tables inherit color from body
quirk
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.
3.13.
The table cell height box sizing quirk
In
quirks mode
, elements that have a
computed value
of the
display
property of
table-cell
must act as they have
used value
of the
box-sizing
property of
border-box
, but only for the purpose of the
height
min-height
and
max-height
properties.
4.
Selectors
4.1.
The :active and :hover quirk
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
Security and Privacy Considerations
There are no known security or privacy impacts in this specification.
Acknowledgments
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
).
Intellectual property rights
Copyright © WHATWG (Apple, Google, Mozilla, Microsoft). This work is licensed under a
Creative Commons Attribution 4.0
International License
. To the extent portions of it are incorporated into source code, such
portions in the source code are licensed under the
BSD 3-Clause License
instead.
This is the Living Standard. Those
interested in the patent-review version should view the
Living Standard Review Draft
Index
Terms defined by this specification
document’s body element
, in § 2.2
Terms defined by reference
[]
defines the following terms:
min-content width of an inline formatting context
outer min-content width of a table cell
[CSS-BACKGROUNDS-3]
defines the following terms:
border-bottom-width
border-left-width
border-right-width
border-style
border-top-width
[CSS-BOX-4]
defines the following terms:
margin-bottom
margin-left
margin-right
margin-top
padding-bottom
padding-left
padding-right
padding-top
[CSS-CASCADE-5]
defines the following terms:
computed value
used value
[CSS-COLOR-4]
defines the following terms:
color
[CSS-DISPLAY-4]
defines the following terms:
block container
containing block
display
initial containing block
inline formatting context
inline-level
table
table-caption
table-cell
table-column
table-column-group
table-footer-group
table-header-group
table-row
table-row-group
[CSS-MULTICOL-2]
defines the following terms:
multi-column spanning element
[CSS-PAGE-FLOATS-3]
defines the following terms:
none
[CSS-POSITION-3]
defines the following terms:
absolute
fixed
position
relative
static
[CSS-SIZING-3]
defines the following terms:
auto
border-box
box-sizing
height
max-height
min-height
width
[CSS-TABLES-3]
defines the following terms:
table wrapper box
[CSS-TEXT-4]
defines the following terms:
soft wrap opportunity
[CSS-VALUES-4]
defines the following terms:


[CSS-WRITING-MODES-4]
defines the following terms:
block flow direction
horizontal writing mode
vertical writing mode
[CSS2]
defines the following terms:
block container element
border box
content box
float
line-height
pseudo-classes
replaced element
[DOM]
defines the following terms:
child
document element
limited-quirks mode
no-quirks mode
quirks mode
[HTML]
defines the following terms:
body
frameset
html
img
table
td
th
the body element
[SELECTORS4]
defines the following terms:
:active
:any-link
:hover
attribute selector
class selector
compound selector
functional pseudo-class
ID selector
pseudo-class
pseudo-elements
type selector
References
Normative References
[CSS-BACKGROUNDS-3]
Elika Etemad; Brad Kemper.
CSS Backgrounds and Borders Module Level 3
. URL:
[CSS-BOX-4]
Elika Etemad.
CSS Box Model Module Level 4
. URL:
[CSS-CASCADE-5]
Elika Etemad; Miriam Suzanne; Tab Atkins Jr..
CSS Cascading and Inheritance Level 5
. URL:
[CSS-COLOR-4]
Tab Atkins Jr.; Chris Lilley; Lea Verou.
CSS Color Module Level 4
. URL:
[CSS-DISPLAY-4]
Elika Etemad; Tab Atkins Jr..
CSS Display Module Level 4
. URL:
[CSS-MULTICOL-2]
Florian Rivoal; Rachel Andrew.
CSS Multi-column Layout Module Level 2
. URL:
[CSS-PAGE-FLOATS-3]
Johannes Wilm.
CSS Page Floats
. URL:
[CSS-POSITION-3]
Elika Etemad; Tab Atkins Jr..
CSS Positioned Layout Module Level 3
. URL:
[CSS-SIZING-3]
Tab Atkins Jr.; Elika Etemad.
CSS Box Sizing Module Level 3
. URL:
[CSS-TABLES-3]
Keith Cirkel.
CSS Table Module Level 3
. URL:
[CSS-TEXT-3]
Elika Etemad; Koji Ishii; Florian Rivoal.
CSS Text Module Level 3
. URL:
[CSS-TEXT-4]
Elika Etemad; et al.
CSS Text Module Level 4
. URL:
[CSS-VALUES-4]
Tab Atkins Jr.; Elika Etemad.
CSS Values and Units Module Level 4
. URL:
[CSS-WRITING-MODES-3]
Elika Etemad; Koji Ishii.
CSS Writing Modes Level 3
. URL:
[CSS-WRITING-MODES-4]
Elika Etemad; Koji Ishii.
CSS Writing Modes Level 4
. URL:
[CSS2]
Bert Bos; et al.
Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification
. URL:
[CSS3-MULTICOL]
Florian Rivoal; Rachel Andrew.
CSS Multi-column Layout Module Level 1
. URL:
[DOM]
Anne van Kesteren.
DOM Standard
. Living Standard. URL:
[HTML]
Anne van Kesteren; et al.
HTML Standard
. Living Standard. URL:
[INTRINSIC]
David Baron.
More Precise Definitions of Intrinsic Widths and Table Layout (Proposal)
. URL:
[RFC2119]
S. Bradner.
Key words for use in RFCs to Indicate Requirement Levels
. March 1997. Best Current Practice. URL:
[SELECTORS4]
Elika Etemad; Tab Atkins Jr..
Selectors Level 4
. URL:
Informative References
[CSSOM]
Daniel Glazman; Emilio Cobos Álvarez.
CSS Object Model (CSSOM)
. URL:
[CSSOM-VIEW]
Simon Fraser; Emilio Cobos Álvarez.
CSSOM View Module
. URL: