怪癖模式

1. 简介

1.1. 历史

浏览器有多种渲染模式用于渲染 HTML 文档，其原因基本上是历史偶然造成的。CSS 规范与现有浏览器的行为不兼容，而现有 Web 内容又依赖这些行为。为了遵循规范同时不破坏现有内容，浏览器引入了一种新的渲染模式（非怪癖模式）。有些浏览器在非怪癖模式下仍然对表格单元格中的图片采用收缩包裹行为，网站开始依赖这种行为，于是实现规范行为的浏览器又引入了第三种模式（有限怪癖模式）。事后看来，最好让默认的 CSS 行为与现有内容依赖的行为兼容，并提供可选的不同行为。此后，不同模式在 CSS 之外也出现了一些差异。

1.2. 目标

• 为渲染旧的（或新的，如果它们有特定的 pragma）HTML 文档创建一个规范。

  HTML 规范定义了 文档何时被设置为怪癖模式、有限怪癖模式或非怪癖模式。[HTML]

• 从实现中移除对 Web 兼容性不需要的怪癖。

  例如，Gecko 移除了关于列表项符号大小的怪癖， Chromium 移除了强制 table 元素 display 为 table 或 inline-table 的怪癖。

• 在确实需要 Web 兼容性的怪癖上实现互操作性。

  例如，Gecko 按照本规范调整了 :active 和 :hover 怪癖的实现，从而与其他浏览器实现了更好的互操作性。

• 在可能的情况下，将怪癖限制在一组固定的遗留特性中，避免它们传播到新特性。

  例如，§ 3.1 无井号十六进制颜色怪癖仅限于一组固定的 CSS 属性，这样该怪癖不会应用于也接受颜色的 SVG 特性，或CSS 渐变中可能导致语法歧义的情况。

本规范并未枚举当前浏览器中存在的所有怪癖。许多怪癖在 HTML、DOM、CSSOM 和 CSSOM View 中有规范说明。[HTML] [DOM] [CSSOM] [CSSOM-VIEW] 如果某个怪癖没有在任何地方规范，可能是因为上面第二条原因。

2. 通用基础设施

2.1. 一致性

本规范中的所有图示、示例和注释均为非规范性内容，所有明确标记为非规范性的章节也是非规范性的。除此之外，规范中的其他内容均为规范性内容。

规范性部分中的关键词 "MUST"、"MUST NOT"、"REQUIRED"、"SHOULD"、"SHOULD NOT"、"RECOMMENDED"、"NOT RECOMMENDED"、"MAY" 和 "OPTIONAL" 应按照 RFC2119 的描述进行解释。为便于阅读，这些词在本规范中未全部采用大写。[RFC2119]

2.2. 术语

当本规范提到“foo 元素”时，指的是本地名为 foo 且命名空间为 http://www.w3.org/1999/xhtml 的元素。

当本规范提到“foo 属性”时，指的是本地名为 foo 且无命名空间的属性。

文档的 body 元素是 文档元素的第一个子元素，该元素为 body 元素（如果存在），且 文档元素为 html 元素。否则为 null。

文档的 body 元素与 HTML 的 body 元素不同，后者可以是 frameset 元素。

3. CSS

3.1. 无井号十六进制颜色怪癖

参见 CSS Color 4 § B 已废弃的怪癖十六进制颜色。

3.2. 无单位长度怪癖

参见 CSS Values 4 § C 怪癖长度。

3.3. 行高计算怪癖

在 怪癖模式 和 有限怪癖模式下，满足以下所有条件的内联盒，在行高计算时应视为 line-height 为零：

• border-top-width、border-bottom-width、padding-top 和 padding-bottom 属性的使用值为零且盒子为垂直书写模式，或 border-right-width、border-left-width、padding-right 和 padding-left 属性的使用值为零且盒子为水平书写模式。

• 盒子要么不包含文本，要么只包含折叠的空白字符。

3.4. 块级元素忽略行高怪癖

在 怪癖模式 和 有限怪癖模式下，对于内容由内联级元素组成的块容器元素，该元素的 line-height 在计算该元素内行盒的最小高度时应被忽略。

这意味着不会创建“支撑线盒（strut）”。

3.5. 百分比高度计算怪癖

在 怪癖模式下，为了计算元素 element 的 height，如果 element 的 position 属性的计算值为 relative 或 static，且 element 的 height 属性的指定值为 <百分比>，并且 element 的 display 属性的计算值不是 table-row、table-row-group、table-header-group、table-footer-group、table-cell 或 table-caption，则 element 的 包含块应按以下算法计算，遇到返回值时即终止：

1. 令 element 为其最近的祖先 包含块，如果没有，则返回 初始包含块。

2. 如果 element 的 display 属性的计算值为 table-cell，则返回 UA 定义的值。

3. 如果 element 的 height 属性的计算值不是 auto，则返回 element。

4. 如果 element 的 position 属性的计算值为 absolute，或 element 不是 块容器或 表格包装盒，则返回 element。

5. 跳转到第一步。

在撰写本文时，CSS 中表格内部百分比高度的工作方式尚未定义。本规范并不试图规定在表格中计算 百分比高度时应使用什么作为包含块。祝好运！

此怪癖需要考虑书写模式。

3.6. html 元素填充视口怪癖

在 怪癖模式下，如果 文档元素 element 满足以下所有条件：

• element 是 html 元素。

• element 的 width 属性的计算值为 auto 且 element 采用 垂直书写模式，或 element 的 height 属性的计算值为 auto 且 element 采用 水平书写模式。[CSS-WRITING-MODES-3]

……则 element 必须按以下算法设置其在 块流方向上的 border box 尺寸：

1. 令 margins 为 element 的 margin-left 和 margin-right 属性的使用值之和（垂直书写模式），否则为 margin-top 和 margin-bottom 属性的使用值之和（水平书写模式）。

2. 令 size 为 初始包含块在 块流方向上的尺寸减去 margins。

3. 返回 size 与元素按 CSS 规范正常应有的 border box 尺寸中的较大值。

3.7. body 元素填充 html 元素怪癖

在 怪癖模式下，如果 文档的 body 元素 body 不为 null 且满足以下所有条件：

• body 的 width 属性的计算值为 auto 且 body 采用 垂直书写模式，或 body 的 height 属性的计算值为 auto 且 body 采用 水平书写模式。[CSS-WRITING-MODES-3]

• body 的 position 属性的计算值不是 absolute 或 fixed。

• body 的 float 属性的计算值为 none。

• body 不是 内联级元素。

• body 不是 多列跨越元素。[CSS3-MULTICOL]

……则 body 必须按以下算法设置其在 块流方向上的 border box 尺寸：

1. 令 margins 为 body 的 margin-left 和 margin-right 属性的使用值之和（垂直书写模式），否则为 margin-top 和 margin-bottom 属性的使用值之和（水平书写模式）。

2. 令 size 为 body 的父元素 内容盒在 块流方向上的尺寸减去 margins。

3. 返回 size 与元素按 CSS 规范正常应有的 border box 尺寸中的较大值。

如果 html 和 body 具有不同的书写模式时应如何处理？

3.8. 表格单元格宽度计算怪癖

在 怪癖模式下，为了计算表格单元格 cell 作为 包含块的内联格式化上下文的 min-content 宽度时，如果 cell 的 width 属性的计算值为 auto，则该内联格式化上下文中的 img 元素（作为 内联级 替换元素）前后不得有 软换行机会。[CSS-TEXT-3] [INTRINSIC]

3.9. 表格单元格 nowrap 最小宽度计算怪癖

在 怪癖模式下，满足以下所有条件的元素 cell，在自动表格布局算法中，其 外部 min-content 宽度应为 cell 的 width 属性的计算值与 外部 min-content 宽度中的较大值。[INTRINSIC]

• cell 是 td 元素或 th 元素。

• cell 有 nowrap 属性。

• cell 的 width 属性的计算值为非零 <长度>。

3.10. 表格折叠怪癖

在 怪癖模式下，满足以下所有条件的元素 table，其 height 属性的使用值为 0，border-style 属性的使用值为 none。

• table 的 display 属性的计算值为 table。

• table 没有子 table-row-group、table-header-group、table-footer-group 或 table-caption 盒。

• table 没有子 table-column-group 盒，且该盒没有子 table-column 盒。

3.11. 文本装饰不传播到表格怪癖

在 怪癖模式下，文本装饰不得传播到 table 元素内。

3.12. 表格继承 body 颜色怪癖

在 怪癖模式下，color 属性的初始值必须为 quirk-inherit，这是一个没有关键字映射的特殊值。

元素 element 的 color 属性的计算值必须按以下算法计算：

1. 如果 element 的 color 属性的指定值不是 quirk-inherit，跳转到最后一步。

2. 如果 element 不是 table 元素，跳转到最后一步。

3. 如果 文档的 body 元素为 null，跳转到最后一步。

4. 返回 文档的 body 元素的 color 属性的使用值。终止步骤。

5. 如果 element 的 color 属性的指定值为 quirk-inherit，则将其指定值设为 CSS 规范中的初始值。返回 element 的 color 属性的计算值（按 CSS 规范）。

3.13. 表格单元格高度盒模型怪癖

在 怪癖模式下，display 属性计算值为 table-cell 的元素，在 height、min-height 和 max-height 属性的计算时，必须视为 box-sizing 属性的使用值为 border-box。

4. 选择器

4.1. :active 和 :hover 怪癖

在 怪癖模式下，满足以下所有条件的 复合选择器 selector，不得匹配不会同时匹配 :any-link 选择器的元素。[SELECTORS4]

• selector 使用了 :active 或 :hover 伪类。

• selector 未使用 类型选择器。

• selector 未使用 属性选择器。

• selector 未使用 ID 选择器。

• selector 未使用 类选择器。

• selector 未使用除 :active 和 :hover 之外的其他 伪类选择器。

• selector 未使用 伪元素选择器。

• selector 未作为 函数伪类或 伪元素的参数。

安全与隐私注意事项

本规范没有已知的安全或隐私影响。

致谢

感谢 Anne van Kesteren、Boris Zbarsky、Chris Rebert、Dan Mulvey、David Baron、Kang-Hao Lu、Ms2ger、Simon Sapin 和 Tab Atkins 的宝贵意见。

特别感谢 Boris Zbarsky 和 David Baron 在 MDN 上记录了 Mozilla 的怪癖行为。

本标准由 Simon Pieters（Mozilla，zcorpan@gmail.com）撰写。

知识产权声明

Copyright © WHATWG (Apple, Google, Mozilla, Microsoft)。本作品采用 知识共享署名 4.0 国际许可协议授权。若部分内容被纳入源代码，则该部分按 BSD 3-Clause License 授权。

这是现行标准。如需专利审查版本，请参阅 现行标准审查草案。