一旦您花时间了解Web浏览器的历史并了解它们的工作原理,构建和测试跨浏览器兼容网站的需求就会变得显而易见。但了解跨浏览器工作的Web应用程序的重要性是一回事,而为它们开发又是另一回事。虽然几乎不可能使每个浏览器的设计看起来完全相同,但有几种方法可以确保您提供一致的用户体验。有一些技巧可以使您的站点交叉兼容。1.保持代码简单。编码时考虑质量而不是数量。不要将十行代码用于一个只需要三行代码的函数。简单的代码不仅对跨浏览器更友好,而且在需要调试或调整兼容性时也更容易维护。2.使用框架。Foundation和Bootstrap等CSS框架将为您提供样式代码并使交叉兼容性更容易。如果您花时间熟悉某些功能,构建响应式Web应用程序会更快、更容易。这些也将帮助您让您的应用程序在移动浏览器中正确地显示和运行。3.定义一个有效的Doctype。Doctype是代码中的第一行,它描述了将在您的应用程序中使用的HTML。因为不同的浏览器有不同的标准和规则,所以你需要定义Doctype,否则渲染引擎基本上会帮你猜。当然,这会导致您想要避免的错误和不一致。4.CSS重置。每个浏览器都遵循不同的默认CSS规则。这就是为什么您使用CSS来重置样式表以确保您的浏览器遵循相同的基本规则并保持一致的原因。您需要将其中一个添加为要重置的第一个样式表,除非您使用的是已有的框架。5.验证。验证您的HTML和CSS以防止出现问题是个好主意。使用W3CHTMLValidator和CSSValidator确保您的代码没有错误,如果没有错误则修复它。6.条件注释。条件注释允许您链接来自不同浏览器的样式表,这在涉及InternetExplorer常见的设计挑战时特别有用。7.为差异做好准备。此外,几乎不可能有一个在每个浏览器上看起来都一样的设计,除非它是非常基本的。无论您遵循什么规则,形式和排版等细节都可能有所不同。您主要关心的不应该是让设计在每个浏览器上看起来都一样。相反,您应该确保它看起来可以接受并且可以使用,而不包含不适当的元素或阻止某人访问某些功能的元素。8.不要跳过跨浏览器测试。在开发时记住这些技巧是不够的。尽管您尽量避免,但很容易意外地编写出在一个浏览器中不起作用的内容。这就是为什么您需要在交付前检查该站点是否在不同的浏览器上实际工作。使用像CrossBrowserTesting这样的工具,您可以在1,500多个浏览器上执行此操作,因此您永远不必怀疑用户从不同机器访问您的页面时会看到什么。
