浏览器标准模式和怪异模式之间的区别

浏览器的 标准模式（Standards Mode） 和 怪异模式（Quirks Mode） 是浏览器渲染网页时的两种不同模式，它们的主要区别在于对 HTML 和 CSS 的解析和渲染方式。以下是它们的详细对比：

1. 触发条件

xml 复制代码

<!DOCTYPE html>

xml 复制代码

<html>
  <head>
    <!-- 无 DOCTYPE 声明 -->
  </head>
  <body>
    <!-- 页面内容 -->
  </body>
</html>

2. 盒模型（Box Model）

标准模式：
- 使用 W3C 标准盒模型：
  - width 和 height 仅表示内容区域的尺寸。
  - padding 和 border 会增加元素的总宽度和高度。

css 复制代码

.box {
  width: 100px;
  padding: 10px;
  border: 5px solid black;
}

总宽度 = 100px + 20px (padding) + 10px (border) = 130px。
怪异模式：
- 使用 IE 怪异盒模型：
  - width 和 height 包含内容区域、padding 和 border。
  - padding 和 border 不会增加元素的总宽度和高度。

css 复制代码

.box {
  width: 100px;
  padding: 10px;
  border: 5px solid black;
}

3. 行内元素的垂直对齐

标准模式：
- 行内元素（如 img、span）的垂直对齐方式遵循 W3C 标准。
- 使用 vertical-align 属性可以精确控制对齐方式。
怪异模式：
- 行内元素的垂直对齐方式可能与标准模式不同，尤其是在旧版 IE 中。
- 可能导致布局不一致。

4. 表格单元格的尺寸计算

5. CSS 解析和渲染

6. JavaScript 行为

标准模式：
- JavaScript 的 DOM 操作和事件处理遵循 W3C 标准。
- 例如，document.getElementById 和 addEventListener 行为一致。
怪异模式：
- JavaScript 的行为可能与标准模式不同，尤其是在旧版 IE 中。
- 例如，document.all 和 attachEvent 可能被支持。

7. 字体和文本渲染

8. 兼容性

如何确保使用标准模式

xml 复制代码

<!DOCTYPE html>
<html>
  <head>
    <!-- 页面元数据 -->
  </head>
  <body>
    <!-- 页面内容 -->
  </body>
</html>

总结

更多vue相关插件及后台管理模板可访问vue admin reference，代码详情请访问github