leechael.orgHome

CSS 及 JavaScript 的兼容性测试

上一个周末和 Livid 一起花时间解决 v2ex 在 Firefox 3 下的某个问题(见 Livid 的 Firefox 3.0 Beta 的 CSS background 问题);恰好同一天,fcicq 发现 鲜果 在 Firefox 3 及 Konqueror 下的使用也存在一些问题。

一般情况下,我都在 Windows XP 下进行 CSS 的细节优化和 JavaScript 的编写;目前来说,主流浏览器基本都有 Windows 的版本,目前看来,在 Windows 下进行 CSS 的细节优化和 JavaScript 的兼容性测试是较为理想的。

  • IE 6 & IE7。IE7 相对 IE6 来说,有了些许进步,可最不先进的浏览器——这顶帽子还是在它的头上。选择 Windows XP 的原因之一就是 IE6,在 IE6 的市场份额不低于 1% 以前,估计还是得进行 IE6 下的页面测试;或者选择无视 IE 用户。这里推荐一个 for IE6 & IE7 的 debug 工具:My DebugBar。如果你问如何让多个 IE 版本共存,我推荐你在安装 IE7 后使用 Multiple IE 来进行 IE6 甚至 IE5.5 的安装。如果你使用的是 Windows Vista,可参考 这里 查看在 Vista 下安装 IE6 的办法。
  • Firefox。不少开发者都是选择在 Firefox2 下进行开发的,因为各种开发工具实在强大:Web Developer Toolbar, Firebug。当然,我建议你也下载 Firefox3 Mindfield 进行测试,当前版本是 3.0b1, 如果你有兴趣尝鲜,可以像我一般使用 3.0b2。当然,Firefox3 还不足够的完善,如果在测试过程中发现问题,我建议简单地做一个浏览器的检测,当用户使用 Firefox3 婉转地告诉他,由于某些原因暂不支持 Firefox3。
  • Opera。别忘了 Opera。这里有一些 Opera 下的 debug 工具:Web Developer Toolbar & Menu for Opera, Web Accessibility Toolbar, Opera developer tools
  • Safari。现在不再需要为了进行 Safari 的兼容性测试发愁了。值得注意的是,Safari Windows 版本和 Mac 版本还是存在一些细微差异的。Linuxtoy 介绍过一个 在 Linux 下使用 Webkit(Safari 的核心) 的办法,有兴趣的朋友可以试一试。
  • Konqueror。不知道有多少人忽略了这个浏览器呢?我在 Gentoo 下使用的是 xfce4,所以没有安装这个浏览器。据说有人曾把这个移植到 Windows 下,消息真伪未考。现在有安装方便的 Ubuntu,所以把这个浏览器也考虑在内吧。
  • Open Komodo & Firebug Lite。前者是我在 Windows 下使用的编辑器,需要注意的是,在这个编辑器下使用搜狗输入法存在一些问题,建议使用谷歌输入法;后者推荐在本地测试非 Firefox 浏览器时使用。

上面提及的只是常见的浏览器,如果你也是一个苛刻的开发者,希望上面提及的对你有用。

Firefox 3.0b2pre Mindfield

Mindfield 在地址栏中新增添的按钮,给特定的站点加上标记,同时可以快速添加到书签之中。

firefox3 navigation

站点验证信息。

Firefox3 unknown identify imformation

页面信息中的安全板块提供了更多的信息:

Firefox3 page information security panel

可以设定针对某个站点的载入策略;这些在 Firefox 2 中也可以设定,只是在 Mindfield 中更为方便了:

Firefox3 page information permission panel

Mindfield 的 About 信息:

firefox3 about information

User Agent 如下:

Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9b2pre) Gecko/2007110916 Minefield/3.0b2pre

注意,还没有 Firefox 的标记。

官网 首页上标识数点更新,其中包括使用 SQLite 储存书签和历史记录。使用数据库储存这些信息,或许以后 Firefox 崩溃的时候,就不会丢失这些信息了(虽然至此为止,我的 Firefox 2 还没有因为崩溃而丢失用户个性化设定的记录)。

Mindfield 中对 CSS 的支持情况未作测试,可以确定的是,在元素的定位上比 Firefox 2 更为严格。在 Unoffical Firefox Changelog 中挖掘出来的信息如下:

  • 加入对 display:inline-table, inline-block 的支持。
  • 支持 rgba 和 hsla 格式的 color 值。(更多见 CSS3 Color Module
  • 增加对 text-rendering 的支持。

下载地址:mindfield latest trunk