若有人问我在前端开发中,永远都无法逃避的问题是什么?然后我会不假思索的随口说出‘兼容性’!
如今的浏览器市场,依然角逐着各种来自不同厂商不同核心的浏览器。优胜略等,时间和用户总会替我们前端开发者主持公道,去筛选出最具竞争力的产品。
有需求就会有市场,有市场就会有产品,现在的浏览器市场已经不再是当年孤立兼容的时代了。需求促使了标准的产生,于是现在的竞争取而代之的则是运行速度,易用性,扩展性,和标准兼容性。
虽说有着W3C标准化组织给我们前端开发者做坚强的后盾,可是由于各浏览器厂商对标准的理解与对自身功能的强大,兼容性依然是我们前端开发者不可避免的话题,当然还有那个老不死的IE6,虽说覆灭已是命运使然,恶心的是很多用户依然依赖于很长一段时间对它的使用习惯,更恶心的是国内某些浏览器厂商沿用IE6核心换了身皮毛就以自有名称独居的浏览器,以上种种不得不让我们前端人员嗤之以鼻,可是排斥归排斥,我们无法决定用户的选择,但是我们开发者依然要照顾用户,由此衍生的兼容问题就愈发显得明显了。
还是这句话:有需求就会有市场,有市场就会有产品。因此既然市场有兼容性问题,那么由此衍生的测试工具也是层出不穷,在这里,分享几个我经常会用到的测试工具给大家:
IEtest
- 性质:客户端程序
- 使用方式:下载安装到计算机
- 浏览形式:正常网页
- javascript:支持
- 官方下载地址:http://www.debugbar.com/download.php
- 支持浏览器:IE5.5、IE6、IE7、IE8
想必对于这个工具大家都很熟悉了,一个针对IE浏览器的测试的工具,可以测试IE5.5+的各版本IE浏览器,使用方法是把程序安装到本地,然后运行就会出现一个类似于浏览器的窗口(其实直接可以拿来当浏览器用的说),工具栏分布着代表各浏览器的黄色button,点击任意一个便会生成对应浏览器核心的tab。
不过貌似自09年10月更新到4.2版本后就没有新的版本发布,我想说的是4.2版本在win7下经常崩溃。

Spoon
- 性质:网页程序+浏览器插件+沙盘
- 使用方式:下载插件,安装浏览器沙盘程序,在网页点击打开已下载的浏览器沙盘程序
- 浏览形式:正常网页
- javascript:支持
- 使用地址:http://spoon.net/browsers/
- 支持浏览器:IE6、IE7、IE8、Firefox3.5、Firefox3、Firefox2、Safari4、Safari3、Chrome、Opera10、Opera9
这个是我经常用的测试工具,使用方法很简单,就是先打开它的首页,然后在随意一个代表浏览器的小窗口点击下载一个浏览器插件,安装完成后再点击对应浏览器小窗口便开始安装对应浏览器沙盘程序,安装完成后再点击浏览器小窗口就会打开对应浏览器了,这个浏览器和真正的浏览器一摸一样,而且弹出的窗口也是应用程序,并且我们也不用担心病毒,因为它是在沙盘中运行的。

Adobe lab
- 性质:网页flash程序
- 使用方式:打开网页,登陆adobe账户,直接使用
- 浏览形式:网页缩略图
- javascript:不支持
- 使用地址:https://browserlab.adobe.com/index.html
- 支持浏览器:IE6、7、8;Firefox2、3、3.5 for Win or Mac OS;Safari3.0、4.0 for Mac OS
这个Adobe的产品就是强大,一下子支持这么多浏览器不说,而且还支持不同系统下的浏览器,不过它的缺陷也很明显,由于是基于flash程序,因此加载网页速度很慢,并且加载出来的东西不是HTML而是一张图片,因此就实用性来说并不大,它最显著的功能在于你能通过它知道你要测试的网页在各种浏览器下是什么样子,而且它可以生成两个网页左右对比,也可以进行网页重叠对比,至于其他,我还是建议你用上面推荐的测试工具吧,毕竟它不能用来测试你的javascript!
Microsoft Expression Web 3 SuperPreview
性质:客户端程序
使用方式:下载程序安装到本地运行
浏览形式:网页缩略图,带HTML结构,可以用自带选择器选择html结构
javascript:不支持
支持浏览器:IE6、7、8
这个是微软官方出品的测试工具,通过它可以很强大的调试IE各浏览器环境下的网页显示bug,可惜的是它同样不支持javascript的调试。详细内容可以参照我以前的一篇文章
《体验篇:Microsoft Expression Web 3 SuperPreview全攻略》
有了这些工具,让你的测试变的更简单些吧!可能你还有更好的测试工具,如果真是如此,那么不妨也拿出来分享给大家呗!
原著资源,转载请著名并链接到出处 Pivot Code,谢谢!



What quite good topic
CSS YUI cvs web accessibility WordPress HTML subversion bazaar JavaScript CodeIgniter progressive enhancement user experience web standards symfony photoshop cross-browser compatibility PHP web design layered semantic markup MySQL . I work with HTML CSS and JavaScript daily and are good friends with PHP and MySQL..
Some of them dont come through correctly when you paste into your dev application.script type text javascript function queryStringValue findName var name new String var value new String var querystring document.location.href if querystring.indexOf ? -1 return null querystring querystring.split ? querystring querystring 1 .split for q 0 qquerystring.length q var pair querystring q .split name pair 0 .toLowerCase value pair 1 .toLowerCase if findName.toLowerCase name return value document.write queryStringValue noob scriptLets pretend the URL of this page is http http://www.noobflash.com foo index.html?noob someValue.
反正我的主题改过后能通过W3C验证,然后在各浏览器下也没有出过一点问题。
不容易呀。