今天有领导找到我，说让看个奇怪问题。在发布公司内部文章的时候，预览的效果是好的，但发布完了就坏了。我一脸疑惑的接了这个问题，开始对比起它们的区别，那就是没区别。。。
本来呢，应该是具有一个 line-height:1.75 的效果，但一发布就挤到一起去了，如下图：
找原因
这里面有两个逻辑：发布和预览。
-
发布是后台直接生成的静态 HTML
-
预览是前端自己写的单独组件
所以这确实可能造成差异，看吧。完整的检查 html 树，它们结构都是一样的：
既然是 line-height 出了问题，那就从下自上一点一点看哪里出了问题。
1、默认标准都是在 div.bodyStyle 中定义了 line-height，并且为了避免出问题，还特意添加了对应的 style 来防止 css 出问题。
2、内部所有元素都应当继承它。而预览中确实继承了，但是发布的文章却丢失了。
一层一层看的时候，突然发现 table 元素出现了异常：
可以看到，在发布的页面中，table 元素多了好多内容，其中就包括 line-height: normal 这样的属性，所以就导致 line-height 在这里断层了。而右侧预览的样式表中，可以明确看到 line-height 继承了 bodyStyle 中的属性。
差异的原因
因为这个样式表是浏览器提供的，首先，我用的同一浏览器，排除了浏览器问题。那么剩下就是代码问题了。能够导致就剩下：
- HTML生成环境的差异
- CSS 层叠继承干扰
- 浏览器的上下文感知出现问题
确保排除 CSS 的继承问题，也排除浏览器上下文感知出现问题（因为确保 JS 内容没有问题）。大概率就是 HTML生成环境：
- 字符编码
- DOCTYPE 缺失
前者可能会把特殊字符转义导致页面渲染不出来，而后者恰恰会让浏览器进入怪异模式，导致 UA 样式与标准模式不一致。
于是乎，查看两个页面的顶部，确实发布的页面少了这句话，那么就基本锁定问题了。预览是前端代码控制的，可以本地直接跑。直接在 index.html 中删掉顶部的 <!doctype html>，发现确实行间距变了，再加回来这个声明，行间距又好了。
DOCTYPE
DOCTYPE 声明了当前文档是什么类型，它不是 HTML 标签，只是告诉浏览器当前 HTML 使用什么版本的文档类型编写的，该如何解析。
如果没有提供声明标识，那么浏览器就会使用默认方式进行渲染，也就是 BackCompat 模式，这样就会造成在不同浏览器下的显示会有所不同。
而提供了声明标识，那么浏览器就会按照 W3C 的标准模式进行渲染，这样所有浏览器会得到同样的显示效果。
行为差异
1. 盒模型（Box Model）
- 标准模式：元素的
width和height仅包含内容区域（content-box），padding和border需额外计算。 -
怪异模式：
width和height包含内容、padding和border（border-box），可能导致布局尺寸差异。/* 怪异模式下，实际宽度 = width + padding + border */ div { width: 200px; padding: 10px; } /* 总宽度为 200px */影响：盒模型差异会间接改变元素的默认尺寸，触发浏览器的不同默认样式规则。
2. 行内元素垂直对齐
- 标准模式：行内元素（如
img、span）默认基线对齐（vertical-align: baseline）。 -
怪异模式：行内元素默认底部对齐（
vertical-align: bottom）。
文本
3. 字体与表格样式
-
标准模式：
table元素的font-size、line-height等属性继承自父元素。body的margin默认为8px。
-
怪异模式：
table的字体属性可能不继承父元素（如font-size固定为medium）。body的margin可能为0，需手动重置。
/* 怪异模式下，table 的 line-height 可能为 normal */ table { line-height: inherit; } /* 需显式覆盖 */
4. CSS 特性支持
- 标准模式：严格遵循 CSS 规范，支持现代特性（如 Flexbox、Grid）。
- 怪异模式：可能忽略部分 CSS3 规则，或采用旧版浏览器兼容逻辑（如
position: fixed在 IE6 中失效）。
5. JavaScript 行为
- 标准模式：
document.compatMode返回CSS1Compat，DOM 操作符合标准。 - 怪异模式：
document.compatMode返回BackCompat，部分旧版 API 行为可能不同（如getElementById的大小写敏感性）。
用户代理样式表的差异根源
浏览器通过 DOCTYPE 判断渲染模式后，会加载不同的 内部样式表（Internal Stylesheet）。例如：
- 标准模式：UA 样式表可能包含更严格的默认值（如
box-sizing: content-box）。 - 怪异模式：UA 样式表可能模拟旧版浏览器行为（如
box-sizing: border-box）。
以 table 为例：
- 在标准模式下，浏览器可能默认应用 W3C 的
border-collapse: separate和border-spacing: 2px。 - 在怪异模式下，可能继承 IE 的宽松处理逻辑，导致
line-height、font等属性被强制重置。
验证与调试方法
-
检查渲染模式
在浏览器控制台执行：console.log(document.compatMode); // 输出 "CSS1Compat"（标准）或 "BackCompat"（怪异） - 对比样式来源
使用开发者工具的 Computed Styles 面板，观察属性是否带有initial或-internal-quirk-inherit等标记，这些通常是 UA 样式的特征。 - 强制切换模式
修改DOCTYPE声明后刷新页面，观察样式变化。
终极解决方案
有了上面的论述，可以有两种解决这个问题的途径：
1、显式声明标准模式
使用 HTML5 的简化声明：
<!DOCTYPE html>另外，还需要统一开发环境，确保前后端生成的 HTML 均包含完整的 DOCTYPE 和 <meta charset="UTF-8">，避免因编码问题触发怪异模式。
2、重置 UA 样式差异
在 CSS 中覆盖关键属性：
table {
line-height: inherit; /* 强制覆盖怪异模式下的继承 */
font: inherit; /* 修复字体继承问题 */
}
文章评论