概括地说，我把调试流程分为 3 个阶段：

评估并快速修复

还原和重现

定位根源并修复

我们挨个解释每个阶段并实践一个例子。

评估并快速修复

如果 CSS 是你的主要工作语言，或者你对 CSS 有一定的理解和实践经验的话，解决 CSS 问题就有很多简单的方法，否则的话，方法就少一些。

有经验的 CSS 开发者可能都知道的一些 CSS 陷阱：

图片周边存在有趣的空白？设置 display: block（图片默认是内联的，因此会有空白）。

元素排列不正确？你可能有浮动的元素。

绝对定位元素不显示、位置错误或者被遮挡？你可能没有设置父元素的 position 属性或者用 transform 及 opacity 创建一个 z-index 上下文。

伪元素不显示？你可能忘记了设置 ‘content’的值。

这样的 “bug” 有一大堆。实际上根本没有 bug，更多的是开发者缺少对浏览器行为的理解。更准确地说，是 CSS 代码让浏览器怎么做。

对这些 CSS 特性熟悉的开发者能够快速定位到问题并且修复。他们对 bug 的认识与那些对 CSS 不了解的人会产生分歧。这样在解决 CSS bug 中对‘工作流’需求的重要性的认识就会因人而异。

对于‘快速修复’中没有覆盖的陌生问题，在开发者工具中靠猜来解决问题的方式已经没什么价值。即使运气好问题被解决了，也很难判断出问题到底是怎样被解决的。

如果出现的问题不能被轻易解决，先确定问题区域的范围，抓取 HTML 标签（也就是拷贝 DOM），进入下一个调试阶段：还原和重现。

专业提示：大多数浏览器的开发者工具会让你选择包裹元素并拷贝 HTML 区块。在 Chrome 的开发者工具中，要连同包裹元素一起拷贝，需要点击 ‘Copy > Copy OuterHTML’。

还原和重现

本阶段的 CSS bug 修复在类似 Codepen 的帮助下异常简单。我们目的主要是复现出此问题 – 也就是引起 bug 的代码。这能让我们快速定位 bug，直捣黄龙。

为清晰起见，只把相关的 HTML 和 CSS 提取出来复现问题。你既可以手打 HTML 对应的 CSS，也可以复制真实的代码。如果可能的话，不用把所有 CSS 代码一股脑拷贝过去重现问题，保证最精简的要素即可。保持逐步增加 CSS 的习惯，问题就会自己找到你。

在快要接近真相时，往往只需要一个特殊的 CSS 属性的改变就能让 bug 暴露出来。

相对应的做法是，把所有 CSS 都扔进入复现问题，然后每次移除一点，直到问题出现。在实践中，我发现这略笨，不用也因人而异，你可能有不同的见解。

逐步地增加或删除 CSS 代码已经是重现问题和定位故障的固定套路了。

那么 HTML 标签呢？

假设使用最少 CSS 代码复现问题时，效果有如原始代码一样。这也是有用的，我们现在看 HTML 标签。

第一件事要做的，也是不能跳过的，就是检查标签的有效性。即使报告出我们不关心的问题（比如 meta），至少能保证它不会以某种方式破坏美感。我们希望能发现未闭合的标签、没有引号的属性，以及其它任何可能影响浏览器解析的问题。建议你使用 W3C validator。

一旦标签检查通过，将有助于消除浏览器引入意外样式的可能性。这样做：

首先，把所有元素改成 div（块级元素）和 span（行内元素），保证它们只被 CSS 的类选择器选中。也许有必要把额外的选择器移除，如把 a.link 改为 .link。

通过使用固定的标签我们消除了浏览器针对特定元素引入默认样式的可能性。表单元素是个特例（马上会在例子中见到）。

如果把所有元素改成 div 和 span，问题消失了，那么浏览器引入默认样式的嫌疑就被确定了。现在在 computed styles 面板中寻找浏览器增加了什么样式，想办法覆盖它。总之就是要看计算后的样式。