如何确保代码适用于多个浏览器？

Question

确保代码在多个浏览器中按预期工作的过程是什么？什么是最好的答案？

Answer 1

• 符合XHTML（w3.org验证者）
• 符合CSS（w3.org验证器）
• 使用跨浏览器兼容的JavaScript库（尽可能不直接调用JavaScript）

在开发期间测试，测试，测试。不在最后！

Answer 2

拿每个浏览器测试：D

您可以使用browsershots.org等网站查看其在不同浏览器和平台上的外观。

Answer 3

最全面的方法是在不同的浏览器中进行实际测试。一个简单的解决方案是创建虚拟机托管服务器，设置多个VM，然后将不同的浏览器版本安装到不同的VM以完全测试您的应用程序。

如果没有，有些工具可以模拟（但不是完全）浏览器，你可以通过这些工具进行测试。

Answer 4

采取的最佳措施是：

1. 使用CSS Reset（在链接上阅读，按照您的喜好实施）
2. 使用像jQuery这样的Javascript框架（这将抽象出许多跨浏览器的怪癖）
3. Validate您的HTML和CSS。确保您指定了Doctype
4. 您可以通过Chrome，Firefox和IE8测试大多数浏览器。 IE8有一个IE7模式，可用于测试IE7。在IE8中按F12以获取开发人员窗口以调试和解决问题。确保提示您输入所有JS错误。 IE6是一个艰难的，但你可以找到许多资源来帮助你解决这个问题。

希望这会有所帮助。祝你好运。

Answer 5

避免使用前沿代码。

是的，我知道，很多人都会讨厌这个答案。如果你从未在大型企业环境中工作，你会认为我是一个Luddite。但是，我不能告诉你，我给出的要求有多少次特别列出了“没有HTML5”或“没有CSS3”的元素，因为客户端对于IE6的工作与其他人的工作完全一样。

明显的总体答案是测试，但我会更进一步。如果您担心所有浏览器的100％操作，您必须定义您的标准。例如，如果你必须回到IE6代码，你是否需要担心模仿圆角，这对IE6及以下版本来说总是一个黑客？或者，客户是否会接受渐进式增强功能，例如对于那些来自黑暗时代的那些人来说是方形角落，并为我们其他人舍入？当客户端并排拉页时，客户端是否指定了无法分开的字体，或者他们是否理解浏览器使用不同的字体渲染引擎？只在IE6中工作是否可以，或者你是否也必须支持怪癖模式？如何使用屏幕阅读器（辅助功能）或没有CSS或Javascript进行渲染。移动设备怎么样？所有这些都是我上一个主要公司客户的有效和可衡量的问题。

我喜欢Adobe's Browser Labs作为我测试的第一道防线。但是，这只是我采取的众多步骤之一，包括多个OS上的多台物理计算机通过不同的网络代理通过多个连接进行连接。你只是测试不够....甚至在网站启动和成熟时也会发现错误。

Answer 6

http://browsershots.org/

那就是你要找的网站。您需要输入网站的网址，选择要检查的浏览器，然后点击提交。它将根据您选择的浏览器返回您网站的屏幕截图。

Answer 7

没有一种方法可以测试应用程序对Web浏览器的兼容性。首先要记住的是了解为应用程序设置的标准，定义要支持的浏览器和版本的数量。一旦我们知道需要支持什么，我们就可以保留以下几点以确保兼容性：

1. 开发期间的测试。不在最后。
2. 避免前沿代码。 ES5或ES6标准附带的新功能只能由现代浏览器支持，因此需要在旧版浏览器中使用polyfill。因此，尽可能使用最原生的Javascript形式。
3. 如果项目中包含jQuery函数，请使用它。它有助于处理大多数javascript跨浏览器问题。如果不包括在内，请使用您可能需要的项目中的特定功能。
4. 对于CSS，尝试使用传统的布局和样式方法，而不是旧浏览器可能不支持的最新CSS3（如转换属性）。
5. 可以使用Browserstack等工具查看CSS在不同机器上的截图。
6. 实际上在不同的机器和浏览器上进行测试。虽然chrome提供了一流的模拟器，但是当代码实际运行在特定的操作系统和生态系统上时，它可能会出现异常情况。因此，确保最佳方法是在每个生态系统中对它们进行测试。
7. 使用像VirtualBox这样的工具来测试旧浏览器和不同的操作系统。

Answer 8

除了测试测试测试之外，没有办法 ensure ： - ）