介绍

什么是跨浏览器测试？

跨浏览器测试（cross browser testing）是确保你的网站或 web 应用能在可接受数量的浏览器（across an acceptable number of web browsers）上正常使用的测试方法。

• 老旧浏览器对CSS和JavaScript的新特性支持的不够

• 不同设备支持的功能不同

• 有些人只使用键盘

“跨浏览器使用（working cross browser）”，应该在不同浏览器中提供可接受的用户体验。

虽然无法在所有浏览器上提供相同的体验，但确保核心功能使用顺畅就算可以。

为什么会出现跨浏览器问题？

• 浏览器有缺陷，或者实现功能不足

• 一些浏览器对一些技术特点的支持力度与其他浏览器不同

• 一些设备可能会制定一些限制来防止网站运行缓慢或显示效果糟糕

跨浏览器测试的工作流

四个阶段：

初步规划>开发>测试/查错>修复/迭代

步骤 2 到步骤 4 在必要时应多次重复直到开发完成

初步规划

了解需求，确定技术选型。

调查目标用户——使用这个网站的用户用什么浏览器、什么设备等等。

开发

应该把开发分成不同模块，例如可以分成首页、产品页、购物车、支付流程等。然后可以再进行细分——实现公共的页头页脚，实现产品页细节视图，实现购物车组件等。

有一些跨浏览器开发的普适策略，如：

• 让所有功能尽可能在所有目标浏览器上运行。这也许涉及到写不同的代码，让不同浏览器中的功能以不同方式实现。

• 一些东西在不同浏览器运行效果不同，在不支持完整功能的浏览器中提供不同的（可接受的）的解决方案。

• 网站在旧版浏览器上不能用，那就忽略旧版。

测试/查错

在每个实现阶段之后，需要测试这些新功能。要开始测试，应该确保你的代码没有能够阻止功能运行的一般性错误：

1.在一些稳定浏览器中测试，例如 Firefox、Safari、Chrome 或 IE/Edge。

2.做一些低可用性测试，比如尝试只用键盘使用网站，或通过屏幕阅读器访问，来检查可操纵性。

3.在移动端测试，例如 iOS 或 Android。

此时，需要修复一切发现的问题。

接下来，应该在所有浏览器上测试并集中精力排除跨浏览器问题，例如：

• 尝试在所有现代桌面浏览器上测试最新的修改——包括（理想条件下，Windows、Mac、Linux 的）Firefox、Chrome、Opera、IE、Edge 和 Safari。

• 在常用的手机和平板浏览器中测试（例如 iPhone/iPad 上的 iOS Safari、iPhone/iPad/Android 的 Chrome 和 Firefox）

• 也要在你所列出的其他目标浏览器中测试。

自己独立进行能实现的所有测试。应该尽可能在真实物理设备上进行测试。

如果无法测试所有那些不同的浏览器、操作系统和物理真机，也可以用模拟器（在 PC 端用软件模拟设备）和虚拟机（能在 PC 上模拟多种操作系统/软件的软件）

另一个选择是用户群组——使用开发团队之外的一组人测试网站。

在预发布的浏览器上测试

修复/迭代

尽可能锁定 Bug 出现之处。从 Bug 报告者那里尽可能多的获得信息——平台、设备、浏览器版本等等。在相似环境（比如不同桌面平台的同一个浏览器版本，或同一平台中同一浏览器的小差别版本）中测试来检查该 Bug 波及多大范围。

如果是一个浏览器的 Bug，那就希望厂商尽快修复它。

一旦完成修复，应该重新测试来确保修复工作有效，并且没有导致网站的其他地方在其他浏览器中出问题。

报告 Bug

如果发现浏览器 Bug，应该报告给浏览器

进行测试

是否需要测试？

开始测试之前需要确定哪些浏览器将进入被测试名单。

测试所有用户可能使用的浏览器或移动设备是不可能的——数量太大，而且浏览器和设备总在不断更新。

可行的替代方案是，尝试确保网站适用于最常见的浏览器和设备，然后进行防御性编码，以便为网站提供最广泛的支持范围。

防御性编码的实质是一种智能回退措施：如果某个功能或样式在浏览器中不起作用，该网站能够将其降级为不太令人兴奋的后备方案，但仍然能提供可接受的用户体验——主要目的是保证网站可以访问，即使它看起来逊色一点。

浏览器份额统计

浏览器份额统计数据。有许多网站提供这些统计数据，例如：

• Netmarketshare

• Netmarketshare

这些数据都偏向于北美，并不是特别准确，不过它们可以让你了解大致趋势。

使用分析工具

使用像 Google Analytics 这样的分析网站来获取更准确的数据。它能够为你提供诸如人们在用什么浏览器来浏览你的网站这样的精准的统计数据。当然，这需要你已经有一个网站在使用它，所以它不太适合新上线的网站。

HTML和CSS的问题

解决一般问题

检查 HTML 和 CSS 代码，是否格式正确、不包含任何语法错误。

INFO

CSS 和 HTML 之间的一个常见问题，就是不同的 CSS 规则之间发生冲突。当你使用第三方代码时，问题可能大到难以修补。

需要研究一下正在使用的工具，了解它们可能使用的类名与 ID，并围绕，或者规避着它们来设计代码。

验证

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

对于CSS，需要检查属性名拼写是否正确，属性值拼写正确，并且对于它们使用的属性是有效的，不会丢失任何大括号等等。W3C 也有一个 CSS 验证器。

另一个很好的选择就是所谓的 Linter 程序，它不仅可以指出错误，还可以标记关于 CSS 中不良做法的警告，以及其他一些要点。

许多代码编辑器都有 linter 插件。Github 的 Atom 代码编辑器例如有一个丰富的插件生态系统可用，有很多 linting 选项。

浏览器开发者工具

大多数浏览器中内置的开发人员工具还提供了有用的工具来查找错误，主要是针对 CSS 的

常见的跨浏览器问题

• 旧版浏览器不支持新特性

• HTML 回退行为

一些问题可以通过利用 HTML / CSS 的自然工作方式来解决。

无法识别的 HTML 元素被浏览器视为匿名内联元素（有效内联元素，没有语义值，类似于 <span> 元素）。

• CSS 回退行为

如果一个浏览器遇到一个它不明白的声明或规则，它只会完全跳过它，而不会强行应用它或者抛出错误。

• IE 条件注释

IE 条件注释是修改后的专有 HTML 注释语法，可用于将 HTML 代码有选择地应用于不同版本的 IE。这已被证明是一个非常有效的机制来解决跨浏览器的错误。语法如下所示：

<!--[if lte IE 8]>
  <script src="ie-fix.js"></script>
  <link href="ie-fix.css" rel="stylesheet" type="text/css" />
<![endif]-->

只有当浏览器查看页面是 IE 8 或更旧时，此块才会应用 IE 特定的 CSS 和 JavaScript。lte 意思是“小于或等于”，但是也可以使用 lt、gt、gte、!(NOT) 以及其他逻辑语法。

• 选择器支持

如果你不使用正确的选择器来选择你想要的样式的话，就没有任何 CSS 功能可以应用！如果你只是错误地写了一个选择器，所以在任何浏览器中的样式都不像预期的那样，你只需要排除故障并找出选择器出了什么问题。

• 处理 CSS 前缀

CSS 前缀带来的另外一个问题是 - 这些是一种用于允许浏览器供应商在技术处于试验状态时实现自己版本的 CSS（或 JavaScript）特性的机制，所以他们可以使用它来获取它没有与其他浏览器的实现冲突，或者最终的前置实现。

• 布局问题

浏览器之间布局的差异。

• 支持新的布局特性

今天网络上的大部分布局工作都是使用浮动工具完成的 - 这是因为浮动支持得很好（可以回到 IE4，尽管如此，如果你尝试支持 IE，也需要调查一些错误很久以前）。

• 响应式设计问题

响应式设计是创建网页布局以适应不同设备形式因素（例如不同的屏幕宽度，方向（纵向或横向）或分辨率）的做法。

javascript问题

存在的问题

跨浏览器兼容性问题

大多数的跨浏览器 JavaScript 问题是这样的：

• 劣质的浏览器嗅探代码、特性检测代码和供应商前缀的使用阻碍了浏览器运行它们本来可以很好使用的代码。

• 开发者在他们的代码中使用了新的 JavaScript 功能、现代 web API 等，并发现这些功能在旧的浏览器中无法使用。

修复一般的 JavaScript 问题

• 基本的语法和逻辑问题

• 确保变量等被定义在正确的范围内，并且你不会遇到在不同地方声明的项目之间的冲突

• 对 this 的困惑，表现在它适用于什么范围，它的值是否是你所期望的。

• 在使用全局变量进行迭代的循环中不正确地使用函数（更普遍的是“弄错作用域”）

• 在试图使用它们返回的值之前，确保异步操作已经返回。

解决

Linter：使用 linter 可以确保撰写出质量更高，错误更少的 JavaScript 代码，它可以指出错误，也可以标记出关于不良做法的警告等，并且可以自定义为更严格或更宽松的错误/警告报告。

在线检查器：JSHint 主页提供了一个在线 linter，它可以让你在左侧输入 JavaScript 代码，并在右侧提供包含指标、警告和错误的输出。

代码编辑器插件：每次把代码复制并粘贴到一个网页上以检查其有效性并不方便，你真正想要的是一个能融入你的标准工作流程的 linter，而且麻烦最少。许多代码编辑器都有 linter 插件，例如 GitHub 的 Atom 代码编辑器就有一个 JSHint 插件。

其他方式：还有其他的方法来使用这种 linter。可以使用 npm（Node Package Manager——你必须先安装 NodeJS）将这些工具作为命令行工具来安装（可通过 CLI——命令行界面）。

浏览器开发者工具：浏览器开发者工具有很多功能可以帮助定位 JavaScript 的问题，尤其是在开发的工程中，JavaScript 控制台会提醒一些错误信息。