实际上，HTML 和 CSS 的问题在于，它们相当简单，简单到开发人员通常不会认真对待它们，因此难以确保代码简洁、高效，或是能在语义上描述页面各部分的功能。在最坏的情况下，一些网站甚至选择使用 JavaScript 来生成整个网页的内容和样式，这使得页面的可读性较差，并且性能低下（对性能而言，生成大量 DOM 元素的操作是较为昂贵的）。

在其他情况中，不同浏览器对新特性的支持不同，也可能会使某些功能和样式对某些用户不起作用。除此之外，响应式设计问题也很常见——在桌面浏览器中看起来不错的网站可能会在移动设备上给出可怕的体验，因为内容太小而无法阅读，或者性能被代价昂贵的动画严重拖累。

让我们前进吧，看看我们如何能够减少 HTML / CSS 中的跨浏览器错误。

我们在本系列的中说过，一个好的策略是在桌面/移动设备上测试几个现代的浏览器，以确保您的代码正常工作，然后才能专注于跨浏览器问题。

在我们的 和 两篇文章中，我们也提供了一些关于调试 HTML/CSS 的基本指导——如果您不熟悉基础知识，那么在继续之前，您得学习这些文章。

基本上，这是一个如何检查您的 HTML 和 CSS 代码，是否格式正确、不包含任何语法错误的问题。

备注： CSS 和 HTML 之间的一个常见问题，就是不同的 CSS 规则之间发生冲突。当您使用第三方代码时，问题可能大到难以修补。例如，你可能正用着一个 CSS 框架，并发现它使用的一个类名与你已经用于某处的类名冲突。或者，您可能会发现，由某种第三方 API（例如生成广告横幅的脚本）生成的 HTML 包含您已经用于别处的类名称或者 ID。 为了确保不会发生这种情况，您需要首先研究一下您正在使用的工具，了解它们可能使用的类名与 ID，并围绕，或者规避着它们来设计您的代码。设法为 CSS 加上“命名空间”也是值得的，例如，如果有一个小部件，就先确保它有一个独特的类，然后基于这个类来选择元件内的这个类的选择器，这样一来，冲突的可能性就小下来了。例如 .audio-player ul a。

对于 HTML，要确保所有的标签都被正确地关闭和嵌套，写好 DOCTYPE，而且正确地使用各种标签。一个好的策略是定期验证你的代码。一个可以做到这一点的服务是 ，提供您的代码，它就能返回错误列表：

CSS 有一个类似的路线——你需要检查你的属性名拼写是否正确，属性值拼写正确，并且对于它们使用的属性是有效的，你不会丢失任何大括号，等等。为了这个目的，W3C 也有一个 。

另一个很好的选择就是所谓的 Linter 程序，它不仅可以指出错误，还可以标记关于 CSS 中不良做法的警告，以及其他一些要点。大家可以定制 Linter，以得到更严格或者更宽松的错误/警告报告。

有许多在线 Linter 程序，其中最好的可能是“脏标记”（HTML，CSS，JavaScript）和 （仅限 CSS）。它们可以让你把代码粘贴到一个窗口中，并且会用十字标记任何错误，然后可以将它们悬停，以获得错误信息，通知你问题是什么。肮脏的标记还允许您使用清理按钮修复您的标记。

但是，将代码复制并粘贴到网页上以检查其有效性是不太方便的。你真正想要的 Linter 可以和你的工作流更加契合，减免一切窗口切换等麻烦。

许多代码编辑器都有 linter 插件。Github 的 代码编辑器例如有一个丰富的插件生态系统可用，有很多 linting 选项。向您展示一个这样的插件通常如何工作的例子：

1. 安装 Atom（如果您还没有安装最新版本），请从上面链接的 Atom 页面下载。
2. 转到 Atom 的*首选项...*对话框（例如在 Mac 上选择 Atom > 或具有突出标题或其他块级元素的其他站点。
3. 右键/ Cmd +单击有问题的元素并选择 Inspect / Inspect 元素（或者浏览器中的任何选项） - 这应该在浏览器中打开开发工具，在 DOM 检查器中高亮显示该元素。
4. 寻找可以用来选择该元素的功能。例如，在撰写本文时，主要的 Google 徽标的 ID 为 hplogo。
5. 将对此元素的引用存储在变量中，例如：
6. 现在尝试为您感兴趣的 CSS 属性设置一个新的值，你可以使用元素的属性来做到这一点，例如尝试在 JavaScript 控制台中输入这些：

当您开始在第二个点之后键入属性名称表示形式（请注意，在 JavaScript 中，CSS 属性名称是以较低的驼峰大小写，而不是连字符），JavaScript 控制台应该开始自动填充浏览器中存在的属性的名称并匹配到目前为止所写的内容。这对于找出在该浏览器中实现哪个版本的属性很有用。

一旦你找到了你需要支持的前缀，你应该把它们写在你的 CSS 中，例如：

这可以确保所有支持上述任何属性的浏览器都可以使该功能正常工作。值得把非前缀版本放在最后，因为那将是最新的版本，如果可能的话，你会希望浏览器使用它。例如，如果浏览器实现了-webkit-版本和非前缀版本，则它将首先应用-webkit-版本，然后用非前缀版本覆盖它。你希望这样发生，而不是相反。

当然，这样做很多不同的 CSS 规则可能会变得非常乏味。最好使用自动化工具来为你做。而这样的工具存在：

可以附加到页面上，并自动检测浏览器查看页面的功能，并根据需要添加前缀。使用起来非常简单方便，虽然它有一些缺点（请参阅上面的链接了解详细信息），但有一点是可争议的，即在您的站点中解析每个样式表并在运行时添加前缀可能会消耗计算机的处理能力为一个大的网站。

另一个解决方案是在开发过程中自动添加前缀，而这个（和其他的东西除外）可以使用像和这样的工具完成。这些工具可以以多种方式使用，例如 Autoprefixer 有一个，允许您在左侧输入非前缀 CSS，并在右侧给出前缀添加版本。您可以使用列出的符号来选择要确保支持的浏览器; 另请参阅基于此的以获取更多详细信息。例如，以下查询将选择所有主流浏览器的最后 2 个版本和 IE9

Autoprefixer 也可用于其他更便捷的方式 - 请参阅。例如，您可以使用任务运行器/构建工具（如或在开发完成后自动添加前缀。（解释这些工作如何超出本文的范围。）

您也可以使用插件来编辑文本编辑器，如 Atom 或 Sublime 文本。例如，在 Atom 中：

1. 您可以通过转到首选项>安装，搜索 Autoprefixer，然后安装。
2. 您可以通过按“Autoprefixer 设置”按钮并在页面的“设置”部分的文本字段中输入查询来设置浏览器查询。

作为一个例子，我们输入了下面的代码：

我们突出显示了它，并运行 Autoprefixer 命令，并用以下代码替换它：

另一个可能出现的问题是浏览器之间布局的差异。从历史上看，这往往是一个更大的问题，但是最近，现代浏览器倾向于更一致地支持 CSS，布局问题往往更倾向于：

• 对现代布局功能缺乏（或不同）支持。
• 布局在移动浏览器中看起来不太好（即响应式设计问题）。

备注： 过去，Web 开发人员使用 reset CSS 删除应用于 HTML 的所有默认浏览器样式，然后将自己的样式应用于顶部的所有样式 - 这样做是为了使项目的样式更加一致，并减少可能的跨浏览器问题，特别是像布局的东西。然而现在它被认为过头了。我们现在最好的等价物是，这是一个整齐的 CSS，在默认的浏览器样式上略微增加一点，使事情更加一致，并解决一些布局问题。建议您将 normalize.css 应用于所有的 HTML 页面。

备注： 当试图追踪一个棘手的布局问题，一个好方法是添加一个明亮的颜色到有问题的元素，或附近的所有元素。这使得更容易看到一切放置在哪里。请参阅获取更多详细信息。

今天网络上的大部分布局工作都是使用完成的 - 这是因为浮动支持得很好（可以回到 IE4，尽管如此，如果您尝试支持 IE，也需要调查一些错误很久以前）。但是，它们并不是真正用于布局的目的 - 使用浮动的方式实际上是一种黑客攻击 - 而且它们有一些严重的限制（例如，请参阅）

最近，出现了专门的布局机制，例如和，这些布局机制使常见的布局任务变得更加容易并消除了这些缺点。但是，这些在浏览器中并没有得到很好的支持：

• CSS Grid 是非常新的；在撰写本文的时候，他们只在最新版本的现代浏览器中才。
• Flexbox 在现代浏览器中了，但是在旧版浏览器中却存在问题。IE 9 根本不支持它，IE 10 和旧版本的 iOS /桌面 Safari 分别支持 Flexbox 规范的两种不兼容老版本。如果您想尝试在所有这些浏览器上使用 flexbox（请参阅以获得创意），导致一些有趣的浏览器前缀。

布局功能并不像简单的颜色，阴影或渐变那样容易提供优雅的后备。如果布局属性被忽略，你的整个设计可能会崩溃。因此，您需要使用功能检测来检测访问的浏览器是否支持这些布局功能，并根据结果有选择地应用不同的布局（我们将在后面的文章中详细介绍功能检测）。

例如，您可以将 Flexbox 布局应用于现代浏览器，然后将浮动布局应用于不支持 Flexbox 的旧浏览器。

备注： CSS 中还有一个相当新的特性 ，它允许你实现原生特征检测测试。

响应式设计是创建网页布局以适应不同设备形式因素（例如不同的屏幕宽度，方向（纵向或横向）或分辨率）的做法。例如桌面布局在移动设备上看起来会很糟糕，所以您需要使用来提供合适的移动布局，并确保使用正确应用它。您可以在找到这些实践的详细说明。

解决方案也是一个大问题 - 例如，移动设备不太可能需要比台式电脑大的图像，并且更可能具有较慢的互联网连接，并且甚至可能使昂贵的数据计划浪费带宽成为更多的问题。另外，不同的设备可以具有一系列不同的分辨率，这意味着较小的图像可以出现像素化。有许多技术可以让您解决这些问题，从简单的到更复杂的。

可能出现问题的另一个困难是浏览器对使上述技术成为可能的特征的支持。媒体查询没有在 IE 8 或更少的支持，所以如果你想使用移动优先布局和具有桌面布局则适用于旧版本的 IE，你将有一个媒体查询应用于到您的网页，如 或 。

HTML 和 CSS 还有很多其他的问题。最重要的是如何在网上找到答案。

其中最好的支持信息来源是 Mozilla 开发者网络（你现在就在这！）， 和 。

为使用 Mozilla 开发者网络（MDN），大多数人会搜索他们正在尝试查找信息的技术，以及术语“mdn”，例如“mdn HTML5 video”。MDN 包含几种有用的内容类型：

• 带有客户端网络技术浏览器支持信息的参考资料，例如。
• 其他支持的参考资料，例如 。
• 解决特定问题的有用教程，例如。

提供支持信息，以及一些有用的外部资源链接。例如，请参阅（您只需在文本框中输入要搜索的功能）。

（SO）是一个论坛网站，您可以提出问题，并让开发人员分享他们的解决方案，查看以前的帖子，并帮助其他开发人员。在发布新问题之前，建议您先看看是否已经回答了您的问题。例如，我们在 SO 上搜索了“cross browser html5 video”，并且很快得到了。

除此之外，请尝试使用您最喜爱的搜索引擎来解决您的问题。如果有的话，搜索特定的错误信息通常很有用 - 其他开发人员可能会遇到与您一样的问题。

现在您应该熟悉 Web 开发中主要的跨浏览器 HTML 和 CSS 问题，以及如何解决这些问题。