构建跨浏览器兼容网站的8个基本技巧

一旦你花时间了解一下 Web 浏览器的历史并了解它们的工作原理，构建和测试跨浏览器兼容网站的必要性就显而易见了。

但是，了解跨浏览器工作的 Web 应用程序的重要性是一回事，而为其开发又是另一回事。 虽然几乎不可能让每个浏览器的设计看起来都完全相同，但有几种方法可以确保你提供一致的用户体验。有一些技巧可以让你的网站交叉兼容。

1. 保持代码简单。在编码时考虑质量而不是数量。不要将十行代码专门用于只需要三行代码的功能。简单的代码不仅对跨浏览器更友好，而且在需要调试或调整兼容性时也更易于维护。

2. 使用框架。Foundation 和 Bootstrap 等 CSS 框架将为你提供样式代码，让你更轻松地进行交叉兼容性。如果你花时间熟悉某些功能，构建响应式 Web 应用程序将变得更快、更容易。这些还将帮助你使应用程序在移动浏览器中的外观和行为正确无误。

3. 定义有效的 Doctype。Doctype 是你代码中的第一行，它描述了将在你的应用程序中使用的 HTML。因为不同的浏览器有不同的标准和规则，所以你需要定义Doctype，否则渲染引擎基本上会为你猜测。当然，这可能会导致你想要避免的错误和不一致。

4. CSS 重置。每个浏览器都遵循不同的默认 CSS 规则。这就是为什么你使用 CSS 重置样式表来确保你的浏览器遵循相同的基本规则并保持一致。你希望将其中一个添加为第一个样式表以进行重置，除非你使用已经拥有的框架。

5. 验证。验证你的 HTML 和 CSS 以防止出现问题是个好主意。使用 W3C HTML Validator 和 CSS Validator 来确保你的代码没有错误，如果没有则修复它。

6. 条件注释。条件注释允许你链接不同浏览器的样式表，这在涉及 Internet Explorer 常见的设计挑战时特别有用。

7. 为差异做好准备。同样，几乎不可能有一个在每个浏览器上看起来都相同的设计，除非它非常基本。无论你遵循什么规则，形式和排版等细节都可能会有所不同。你的主要关注点不应该是让设计在每个浏览器上看起来都相同。相反，你应该确保它看起来可以接受并且可以使用，而不会包含不合适的元素或阻止某人访问某些功能的元素。

8.不要跳过跨浏览器测试。在开发时记住这些技巧是不够的。 尽管你试图避免它，但很容易意外地编写在一个浏览器中不起作用的东西。 这就是为什么你需要在交付前检查该站点是否在不同浏览器上实际运行的原因。 使用 CrossBrowserTesting 之类的工具，你可以在 1,500 多个浏览器中执行此操作，因此你永远不必想知道用户从不同的机器访问你的页面时看到的内容。