[p]前端开发人员最头疼的，莫过于形形色色的浏览器间的兼容性问题。每天绞尽脑汁地为这些本不应该存在的东西费尽心思。由于各个浏览器内核及解析方式的不同，使得相同的前端代码不能实现相同的效果。所以，培养良好标准的代码编写习惯的同时，熟练掌握浏览器兼容性测试的常用工具也是必需的了。这里是网络上传播较多的13个不同操作系统中各色浏览器兼容性测试的软件工具。[/p] html和css验证 [p]首先让我们先看一看检查验证html与css的方法。我应该说到的是由于我在mac上工作，会略微偏向于mac。不要担心，仍然有许多平**立解决方案的。[/p] [p]除了验证你的文件以外,你也应该很好的格式化自己的代码”[url=http://blog.themeforest.net/tutorials/examples-and-tips-for-great-htmlcss-formatting/]html/css格式化[/url][url=http://blog.themeforest.net/tutorials/examples-and-tips-for-great-htmlcss-formatting/]实例与提示[/url]“是有关此类主题的文章。[/p] 1. w3c 验证 – html [p]可能大多数人都知道在线的[url=http://validator.w3.org/][color=#2e6ab1]w3c验证服务[/color][/url]你可以通过链接地址进行验证，或者是上传文件或者直接提交代码。有很多的验证选项，尽管很多时间你不真的需要他们。[/p] [url=http://validator.w3.org/][img]http://bbon.cn/wp-content/uploads/2009/11/224822xr4.jpg[/img][/url] 2. w3c 验证 – css [p]你很可能知道w3c的也有一个[url=http://yeeyan.com/articles/tag/css][color=#335533]css[/color][/url]校验服务。与html验证服务一样，这个css版本更多的选择，并允许在必要时通过的uri验证，文件上传和直接提交代码。[/p] [url=http://jigsaw.w3.org/css-validator/][img]http://bbon.cn/wp-content/uploads/2009/11/2248229ja.jpg[/img][/url] 3. [firefox] 网页开发工具条 [p]the web developer toolbar extension for firefox的网页开发工具条非常受欢迎，拥有很多非常棒个的功能，附加了很棒的html与[url=http://yeeyan.com/articles/tag/css][color=#335533]css[/color][/url]验证工具，你可以快速的对当前浏览的本地文件网站进行验证。他会发送uri或者文件到w3c，并在新的选项页里面显示验证结果。[/p] [p]你也可以打开“验证显示页面”来快速查看html和[url=http://yeeyan.com/articles/tag/css][color=#335533]css[/color][/url]的验证信息，无需再打开新的标签页面。假如你在开发一个项目非常有帮助。不仅仅是html与css你也可以验证更多的选项。[/p] [url=http://chrispederick.com/work/web-developer/][img]http://bbon.cn/wp-content/uploads/2009/11/22482338a.jpg[/img][/url] 4. [独立的浏览器] w3c validator favelets [p]我使用safari浏览器作为我的主要网络浏览器，但是firefox已经宠坏了我，它拥有强大的扩展选择，如网络开发工具栏和firebug。 safari浏览器的web inspector，一个类似firebug的工具，但不能进行文件验证。[/p] [p]涵盖几乎任何主要浏览器验证html和[url=http://yeeyan.com/articles/tag/css][color=#335533]css[/color][/url]的快速和轻松的方法是使用favelets 。 favelets是通过javascript增加额外的功能的书签片段。 w3c的提供了几种验证favelets，我经常使用的是safari 。[/p] [url=http://validator.w3.org/favelets.html][img]http://bbon.cn/wp-content/uploads/2009/11/224823x7x.jpg[/img][/url] 5. 你的开发编辑器 [p]大多数的编辑器提供少许的验证工具。目前我使用的编辑器[url=http://panic.com/coda/][color=#2e6ab1]coda[/color][/url]和[url=http://macrabbit.com/cssedit/][color=#2e6ab1]cssedit[/color][/url]都提供验证工具。[url=http://macrabbit.com/cssedit/][br][/url][/p] [img]http://bbon.cn/wp-content/uploads/2009/11/224823xf9.png[/img] 6. 验证 s.a.c. [p]如果您需要迅速验证大量的文件，在最喜爱的编辑器或通过浏览器打开所有文件是痛苦的事情。这个应用会让这个过程快速而且简单。[/p] [p]s.a.c验证器是os x的单机应用程序，可以使用favelet验证html文件（with w3c），拖放或者通过url的或仅仅是应用程序的文件> 打开。我用的是拖放方法尤其频繁。 [img]http://bbon.cn/wp-includes/images/smilies/icon_wink.gif[/img] [/p] [url=http://habilis.net/validator-sac/][img]http://bbon.cn/wp-content/uploads/2009/11/2248237ks.jpg[/img][/url] 验证的一些想法 [p]虽然验证是非常重要的，不过它只是一种工具，以帮助确保您的代码达到标准和接近完美。如果您使用的是一些新的网络技术，它可能无法验证，这并不意味着你不应该使用它。创新的问世往往是打破了规则。[/p] [p]尽管如此，如果需要提交的模板进行销售，请确保所有的文件验证后提交。如果有由于[url=http://yeeyan.com/articles/tag/css][color=#335533]css[/color][/url]3这样的验证错误，只需要在后面的说明中注明。 [img]http://bbon.cn/wp-includes/images/smilies/icon_wink.gif[/img] [/p] 浏览器兼容测试 [p]如果每个人都只使用最新版本的firefox或safari浏览器，浏览器的测试将是一件轻而易举的事。还是让我们面对现实吧，这是不会发生，我们未来几年都将会与internet explorer的问题做斗争（不只是ie6） 。[/p] [p]以下是一些我常用的和一些我不用的工具，测试internet explorer，safari，firefox和其他浏览器的兼容性。[/p] 当前的ie, firefox 与 safari [p]很明显，如果你在使用的windows，目前肯定安装了例如firefox 3.5 ， safari4 ， opera和internet explorer等浏览器。[/p] [img]http://bbon.cn/wp-content/uploads/2009/11/224823jje.jpg[/img] 7. 老版本的firefox [p]如果需要测试的旧版本firefox。这里有几个我认为最简单的方法可以做到这一点。[/p] [ul] [li]windows: [url=http://sourceforge.net/projects/portablefirefox/files/][color=#2e6ab1]standalone firefox (older versions)[/color][/url] via [url=http://portableapps.com/][color=#2e6ab1]portableapps.com[/color][/url][/li] [li]mac: [url=http://davemartorana.com/multifirefox/][color=#2e6ab1]multifirefox 2.0[/color][/url][/li][/ul] [p]portableapps在windows上作为单独的应用软件运行firefox，因此没有必要安装，也不会干扰到当前安装的firefox。[/p] [p]mac下的multifirefox 2.0，可以让你运行不同版本的firefox，并管理不同的账户。[/p] [url=http://davemartorana.com/multifirefox/][img]http://bbon.cn/wp-content/uploads/2009/11/224824zhl.jpg[/img][/url] [p]你可以访问 [url=http://releases.mozilla.org/pub/mozilla.org/firefox/releases/][color=#2e6ab1]http://releases.mozilla.org/pub/mozilla.org/firefox/releases/ [/color][/url]下载其他版本[url=http://releases.mozilla.org/pub/mozilla.org/firefox/releases/][br][/url][/p] 8.老版本的safari [p]不幸的是，基于windows的web开发人员，我没有测试多个版本的safari浏览器的简单解决办法。对mac用户来说，这是个不错的独立版本的safari浏览器收集，[url=http://michelf.com/projects/multi-safari/][color=#2e6ab1]michel fortin提供[/color][/url]。[/p] [url=http://michelf.com/projects/multi-safari/][img]http://bbon.cn/wp-content/uploads/2009/11/224824gpk.png[/img][/url] 9 & 10. 老版本的internet explorer [p]在mac下交互测试ie是不轻松的，所以我安装了虚拟机运行xp安装了ietester，这个产品可以帮助你在windows xp, vista 和 7下测试ie从5.5开始的各个版本。[/p] [url=http://my-debugbar.com/wiki/ietester/homepage][img]http://bbon.cn/wp-content/uploads/2009/11/224824dm7.jpg[/img][/url] [p]每隔一段时间我都会在ietester中发现一个古怪的问题,我不能确定是不是在原版本的ie6或7中是存在。所以我也使用[url=http://finalbuilds.edskes.net/iecollection.htm][color=#2e6ab1]internet explorer collection[/color][/url]安装了独立版本的ie6, 7 和 8。[/p] [url=http://finalbuilds.edskes.net/iecollection.htm][img]http://bbon.cn/wp-content/uploads/2009/11/224824wbj.jpg[/img][/url] 快照服务 [p]假如你不需要在这些浏览器中与你的网站实际互动，你还可以使用多种浏览器的快照服务，这将只显示网站在各种各样的浏览器中的图像效果。[/p] 11. adobe browserlab [p]adobe最近放出一个新的名叫[url=http://browserlab.adobe.com/][color=#2e6ab1]browserlab[/color][/url]的服务，它可以通过网站的网址让你看到不同浏览器下的不同效果。快速，免费，你可以进行两个不同浏览器版本的浏览效果进行对比。[/p] [url=http://browserlab.adobe.com/][img]http://bbon.cn/wp-content/uploads/2009/11/224824cw8.jpg[/img][/url] 12. browsershots.org [p][url=http://browsershots.org/][color=#2e6ab1]browsershots.org[/color][/url] 与adobe browserlab有着相同想法，但是也有很多的不同之处。你可以在更多的平台上设置更多的选项例如屏幕大小，颜色深度，js，flash等，来测试更多的浏览器效果。服务的趋势在下降，因为速度有点慢（有的时候太慢了），几乎没有很好的ui.[/p] [url=http://browsershots.org/][img]http://bbon.cn/wp-content/uploads/2009/11/224824rtp.jpg[/img][/url] 13. browsercam [p]如果你没有读到”[url=http://blog.themeforest.net/resources/25-essential-web-services-for-designers/][color=#2e6ab1]25个设计师必不可少的网络服务[/color][/url]“, 那你应该去读一下。你会发现有很多很棒的服务，[url=http://browsercam.com/][color=#2e6ab1]browsercam[/color][/url] 就是我在其中发现的。[/p] [p]browsercam也可以做基础的浏览效果截图，但是进一步使用别的功能和快速显示需要付费，然而我没有再次使用。[/p] [url=http://browsercam.com/][img]http://bbon.cn/wp-content/uploads/2009/11/2248255e8.jpg[/img][/url] 最后的一些想法 [p]现在你拥有了一些在windows和mac中验证和测试工作的的方法。如果你要提交模板到theme fores，你现在没有验证错误或者浏览器不兼容的接口了吧。大多数我审查拒绝的模板，都是由于浏览器验证错误和浏览器兼容问题而造成的，需要在提交前修正这些问题。[/p] [p]内容出处不详，如果是你的原创文章，请留下你的文章地址，会及时补上。[/p] [p][url=http://bbon.cn/2009/11/13-debugging-the-browser-compatibility-verification-tools.html]http://bbon.cn/2009/11/13-debugging-the-browser-compatibility-verification-tools.html[/url][/p]