Quirks Mode（怪异模式）：盒模型解析与百分比高度计算的历史遗留差异 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

Quirks Mode：盒模型解析与百分比高度计算的历史遗留差异

大家好，今天我们来深入探讨一个Web开发中常常被忽视但又至关重要的话题：Quirks Mode，也就是怪异模式。我们会重点关注它在盒模型解析和百分比高度计算方面与标准模式的差异，以及这些差异背后的历史原因和实际影响。

什么是Quirks Mode？

简单来说，Quirks Mode是浏览器为了兼容早期不遵循W3C标准的网页而存在的一种渲染模式。当浏览器检测到网页没有使用DOCTYPE声明或者使用了过时的DOCTYPE声明时，就会进入Quirks Mode。在这种模式下，浏览器会以一种更接近于旧版浏览器的行为来解析HTML、CSS和JavaScript，这可能会导致页面在不同浏览器之间，甚至在同一浏览器的不同版本之间出现渲染差异。

相对地，如果网页使用了正确的DOCTYPE声明，浏览器就会进入Standards Mode（标准模式），并按照W3C的标准来解析和渲染页面，从而保证更好的跨浏览器兼容性。

DOCTYPE声明的重要性

DOCTYPE（Document Type Declaration）声明位于HTML文档的开头，用于告诉浏览器应该使用哪个HTML或XHTML规范来解析文档。正确的DOCTYPE声明是触发Standards Mode的关键。

以下是一些常见的DOCTYPE声明示例：

HTML5:
```
<!DOCTYPE html>
```
这是最简洁、最推荐使用的DOCTYPE声明，它适用于所有HTML5文档。
HTML 4.01 Strict:
```
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
```
这个声明表示文档遵循HTML 4.01的严格规范，不允许使用废弃的元素和属性。
HTML 4.01 Transitional:
```
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
```
这个声明允许使用一些废弃的元素和属性，以便于兼容旧的网页。
XHTML 1.0 Strict:
```
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
```
这个声明表示文档遵循XHTML 1.0的严格规范，要求所有元素和属性都必须正确嵌套和闭合。

缺少DOCTYPE声明或者使用不完整的声明，通常会导致浏览器进入Quirks Mode。

盒模型：标准与怪异

盒模型是CSS中一个非常重要的概念，它描述了HTML元素是如何被表示为一个矩形盒子的。盒模型由content（内容）、padding（内边距）、border（边框）和margin（外边距）组成。

在Standards Mode下，盒模型的计算方式如下：

width 和 height 属性只包含 content 的宽度和高度。
padding 和 border 会增加元素的总宽度和高度。

举个例子：

<!DOCTYPE html>
<html>
<head>
<title>Standard Box Model</title>
<style>
.box {
  width: 200px;
  height: 100px;
  padding: 20px;
  border: 5px solid black;
  margin: 10px;
}
</style>
</head>
<body>
<div class="box">This is a box.</div>
</body>
</html>

在这个例子中，.box 元素的 width 是 200px，height 是 100px，padding 是 20px，border 是 5px。因此，元素的总宽度是 200px + 20px 2 + 5px 2 = 250px，总高度是 100px + 20px 2 + 5px 2 = 150px。

在Quirks Mode下，盒模型的计算方式有所不同：

width 和 height 属性包括 content、padding 和 border 的宽度和高度。
也就是说，width 和 height 指定的是元素的总宽度和高度，而不是仅仅 content 的宽度和高度。

如果上面的例子在Quirks Mode下运行，.box 元素的 width 仍然是 200px，height 仍然是 100px。但是，浏览器会减去 padding 和 border 的宽度和高度来计算 content 的实际宽度和高度。

因此，在Quirks Mode下，content 的实际宽度是 200px – 20px 2 – 5px 2 = 150px，实际高度是 100px – 20px 2 – 5px 2 = 50px。

为了更清晰地展示差异，我们用表格对比一下：

属性	Standards Mode	Quirks Mode
`width`	Content宽度	Content + Padding + Border的总宽度
`height`	Content高度	Content + Padding + Border的总高度

百分比高度：祖先元素的限制

在CSS中，我们可以使用百分比来设置元素的宽度和高度。当元素的宽度设置为百分比时，它是相对于其父元素的宽度来计算的。例如，如果一个元素的宽度设置为 width: 50%;，那么它的宽度将是其父元素宽度的一半。

但是，当元素的高度设置为百分比时，情况会变得更加复杂。在Standards Mode下，一个元素的高度设置为百分比时，它是相对于其 包含块 的高度来计算的。关键在于，如果包含块的高度没有显式地定义（例如，通过 height 属性），或者它的高度取决于其内容的多少，那么百分比高度的计算结果将会是0。

举个例子：

<!DOCTYPE html>
<html>
<head>
<title>Percentage Height</title>
<style>
html, body {
  height: 100%; /* 设置html和body的高度为100% */
}
.container {
  height: 50%; /* 设置container的高度为其父元素（body）的50% */
  background-color: lightblue;
}
.child {
  height: 50%; /* 期望child的高度是container的50% */
  background-color: lightcoral;
}
</style>
</head>
<body>
<div class="container">
  <div class="child">This is a child element.</div>
</div>
</body>
</html>

在这个例子中，.child 元素的高度设置为 50%，我们期望它的高度是 .container 元素高度的一半。但是，由于 .container 元素的高度也是一个百分比，而且它的父元素（body）的高度也需要显式地设置（否则默认为auto，也就是内容的高度）, 最终child元素的高度才能正确计算。如果 html 和 body 的高度没有设置为 100%，那么 .child 元素的高度将会是0。

在Quirks Mode下，百分比高度的计算方式可能会有所不同。一些旧版本的浏览器在Quirks Mode下可能会尝试“猜测”包含块的高度，并以此来计算百分比高度。但是，这种行为是不一致的，不同的浏览器可能会有不同的结果。因此，我们应该尽量避免依赖Quirks Mode下的百分比高度计算。

Quirks Mode下的高度计算问题

在Quirks Mode下，百分比高度的计算往往会变得更加复杂和不可预测。这是因为：

祖先元素高度的依赖性减弱： Quirks Mode下，浏览器可能不会严格要求所有祖先元素都必须显式地定义高度。这意味着即使父元素的高度没有设置，子元素仍然有可能获得一个非零的百分比高度。
不一致的计算方式： 不同浏览器在Quirks Mode下对百分比高度的计算方式可能存在差异。这意味着即使在同一个DOCTYPE声明下，不同的浏览器也可能渲染出不同的结果。
难以预测的行为： 由于Quirks Mode的本质是为了兼容旧版本浏览器，其行为往往是不规范和难以预测的。这使得调试和维护Quirks Mode下的页面变得非常困难。

因此，强烈建议避免在Quirks Mode下使用百分比高度。 如果必须使用百分比高度，请确保使用正确的DOCTYPE声明，并显式地设置所有祖先元素的高度。

如何避免Quirks Mode

避免Quirks Mode的最佳方法是使用正确的DOCTYPE声明。对于HTML5文档，应该使用以下声明：

<!DOCTYPE html>

这个声明简单明了，并且可以触发Standards Mode。

除了DOCTYPE声明之外，还有一些其他的因素可能会影响浏览器的渲染模式：

使用过时的HTML和CSS： 避免使用已经废弃的HTML元素和CSS属性。
使用不规范的HTML： 确保HTML代码符合规范，例如正确嵌套和闭合元素。
避免使用CSS hacks： CSS hacks是一些利用浏览器漏洞来应用样式的技巧。虽然CSS hacks在某些情况下可以解决兼容性问题，但它们也可能会导致页面在其他浏览器中出现问题。

通过开发者工具诊断渲染模式

大多数现代浏览器都提供了开发者工具，可以用来诊断页面的渲染模式。

Chrome DevTools: 打开开发者工具（通常可以通过按下F12键），然后导航到 "Console" (控制台) 选项卡。输入 document.compatMode 并按回车键。如果输出是 "CSS1Compat"，则表示页面处于Standards Mode；如果输出是 "BackCompat"，则表示页面处于Quirks Mode。
Firefox Developer Tools: 类似于Chrome，打开开发者工具（通常可以通过按下F12键），然后导航到 "Console" 选项卡。输入 document.compatMode 并按回车键。输出结果与Chrome相同。
Edge DevTools: Edge 使用与 Chrome 相同的 Chromium 内核，因此使用方法与 Chrome DevTools 相同。

常见Quirks Mode导致的布局问题及解决方法

以下是一些常见的由于Quirks Mode引起的布局问题以及相应的解决方法：

问题	原因	解决方法
盒模型计算错误，导致元素宽度或高度超出预期	浏览器在Quirks Mode下会将padding和border包含在width和height中计算。	确保使用正确的DOCTYPE声明，并使用`box-sizing: border-box;`来统一盒模型计算方式。这个属性会让浏览器按照Standards Mode的方式来计算盒模型，即使在Quirks Mode下也能得到一致的结果。
百分比高度计算错误，导致元素高度为0或不正确	浏览器在Quirks Mode下对百分比高度的计算方式可能与Standards Mode不同，或者无法正确地计算百分比高度。	确保使用正确的DOCTYPE声明，并显式地设置所有祖先元素的高度。如果无法显式地设置高度，可以考虑使用JavaScript来动态计算元素的高度。另一种方法是使用`viewport-relative units`，如`vh` (viewport height)，它总是相对于视口的高度计算，不受父元素高度的影响。
页面元素错位或重叠	Quirks Mode下浏览器对CSS的解析和渲染方式可能与Standards Mode不同，导致页面元素错位或重叠。	确保使用正确的DOCTYPE声明，并仔细检查CSS代码，确保没有使用过时的CSS属性或不规范的CSS语法。可以使用CSS Lint等工具来检查CSS代码中的错误。
JavaScript行为异常	Quirks Mode下浏览器对JavaScript的解析和执行方式可能与Standards Mode不同，导致JavaScript代码无法正常工作。	确保使用正确的DOCTYPE声明，并仔细检查JavaScript代码，确保没有使用过时的JavaScript语法或不兼容的API。可以使用JSLint等工具来检查JavaScript代码中的错误。

兼容性考量：针对旧浏览器的策略

虽然我们应该尽量避免Quirks Mode，但在某些情况下，我们需要兼容一些旧版本的浏览器。在这种情况下，我们可以采取以下策略：

渐进增强 (Progressive Enhancement): 优先为现代浏览器提供最佳体验，然后逐步为旧浏览器添加功能和样式。这意味着我们需要编写干净、标准的HTML、CSS和JavaScript代码，并使用feature detection来检测浏览器是否支持某些功能。如果浏览器不支持某个功能，我们可以提供一个备选方案。
优雅降级 (Graceful Degradation): 首先构建一个功能完整的网站，然后针对旧浏览器进行降级处理，使其能够正常显示内容，即使某些功能无法使用。
条件注释 (Conditional Comments): 条件注释是一种特殊的HTML注释，可以用来针对特定的IE浏览器版本应用不同的CSS样式或JavaScript代码。例如：
```

```
这段代码表示，如果浏览器是IE8或更早的版本，则加载 ie8.css 文件。
使用Polyfills/Shims: Polyfill 是一种 JavaScript 代码，用于在旧浏览器中模拟新浏览器的功能。例如，可以使用 Polyfill 来在 IE8 中支持 HTML5 元素。

避免Quirks Mode，拥抱标准，打造健壮的Web应用

Quirks Mode是Web开发历史遗留的一个问题，它会导致页面在不同浏览器之间出现渲染差异，增加开发和维护的难度。为了避免Quirks Mode，我们应该始终使用正确的DOCTYPE声明，遵循W3C标准，并使用现代化的Web开发技术。

通过理解Quirks Mode的原理和影响，我们可以更好地解决兼容性问题，并打造健壮、可维护的Web应用。

更多IT精英技术系列讲座，到智猿学院