【吐血整理分享】IE10相关简单几步，让你的网站兼容IE10（第三弹！）
本帖最后由 eugene2candy 于 2012-10-26 11:06 编辑【吐血整理分享】IE10相关简单几步，让你的网站兼容IE10（第一弹！）【吐血整理分享】IE10相关简单几步，让你的网站兼容IE10（第二弹！）
兼容性测试工具
Compat Inspector 是一种基于 JavaScript 的测试工具，它在网站运行的时候分析网站。CompatInspector 自动监视并报告已知会导致问题的交互模式。这让你可以迅速找出问题，而不需要先熟记一大堆文档。1. 开始使用Compat Inspector要运行 Compat Inspector，你需要将下面这段代码写到每一个要测试的页面中的所有<script>标签之前：<script src="http://ie.microsoft.com/testdrive/HTML5/CompatInspector/inspector.js"></script>你也可以使用 Fiddler 自动将 Compat Inspector 注入到要测试的页面中，只要将这个代码片段（http://ie.microsoft.com/testdrive/HTML5/CompatInspector/help/snippet.txt）加入到你的Fiddler脚本（http://www.fiddlertool.com/fiddler/dev/scriptsamples.asp）中就好了。之后你就可以在菜单栏的”Rules”菜单中启动和关闭 Compat Inspector 了，如下图所示：将上述的脚本添加好之后在 Internet Explorer 10 中打开你的页面，CompatInspector 就会立即开始分析这个页面。需要注意的是，一些运行时问题只有在代码运行过程中才能够被捕捉到，因此需要你手动触发这些不正常的交互过程来进行测试。Compat Inspector 会按照错误(红色)、警告(黄色)和提示信息(蓝色)分别统计检测到的问题的总和，统计结果显示在页面的右上角：点击这个统计结果视图，你可以从展开的视图中获得每个问题的详细信息和相关文档：Compat Inspector 还为大多数的错误和警告提供“验证”和“调试”功能，以便对问题进行更精准的定位。
2. 验证部分测试用例具有内置的“验证器”，可模拟遗留的行为(legacy behavior)。这让你在不修改任何代码的情况下就能够找出问题的根本原因。前提：有错误或警告消息出现在 CompatInspector 的 Details 视图中，并且这些消息包含“Verify”复选框。1) 勾选一个你想要验证的错误或警告的”Verify”复选框2) 刷新页面（你会在看到一个通知，提示你验证器已经被启用）3) 再次触发这个错误或警告4) 如果同样的问题依然存在o 如果仍然显示错误或警告消息，则使用其他消息重复步骤1-4；否则 Compat Inspector 无法确认这个问题，请访问 Internet Explorer 10 Guide for Developers（http://msdn.microsoft.com/library/hh673549.aspx）获取更多帮助信息。5) 否则，你就已经找到了问题的根源所在o 取消所有“Verify”复选框的勾选o 刷新页面o 依照下面“调试”一节中叙述的步骤定位你代码中各条消息的来源o 按照所显示的错误/警告消息中的说明解决该问题3. 调试Compat Inspector 还可以通过调试功能帮助你发现代码中的错误。前提：有错误或警告消息出现在 CompatInspector 的Details 视图中，并且这些消息包含“Debug”复选框。1) 勾选一个你想要调试的错误或警告的”Debug”复选框2) 按 F12 键打开开发者工具3) 切换到"Script"选项卡4) 点击"Startdebugging"5) 重复最初触发该错误或警告的步骤(这将调用脚本调试器)6) 切换到 F12 开发者工具右侧的”Call stack”子选项卡7) 在调用堆栈中，双击黄色箭头指向条目的下方条目8) 查看 F12 开发者工具左侧部分，检查触发错误或警告的代码段4. 鉴别Frames许多网页都嵌入了 frame，有些来自于其他域名的网页。如果你使用 Fiddler 向frame 中注入Compat Inspector，它也能够发现 frame 中的问题，并产生相应的消息。Compat Inspector 会帮助你找出哪一个或哪些frame 触发了一个消息。只需要点击这个消息并且在”Details”视图中打开它，视图中就会显示出每一个触发该消息的frame。每个 frame 条目包含了该 frame 的 URL 以及“验证”和“调试”选项。使用这些选项你能够更准确地定位某个frame 中的问题。5. JavaScript 库一个常见的问题是使用“过时”的JavaScript 库。Compat Inspector 使用两个步骤帮助发现由使用“过时”的JS 库所引发的问题。首先，它会检测并报告你所使用的库的版本，然后勾选”Verify”复选框将当前版本的库替换为最新版本。使用这个方法你就能够快速鉴别问题是否由使用“过时”的JS 库引起的。6. 最后的步骤由于Compat Inspector 是一个测试工具，不能用在发布的产品当中，因此在发布你的网站之前，要确保将Compat Inspector 脚本从所有页面中移除。 通过以上三个步骤，相信你已经了解了如何让你的网站兼容IE10并且解决兼容性问题，还可以通过一些测试工具来发现问题，后面我们可以来针对HTML5进行一些优化，更多内容可以参阅IE10兼容性白皮书，获得更多的帮助，下载地址：http://vdisk.weibo.com/s/bKgeq
支持楼主的辛苦整理！ alan0320 发表于 2012-10-26 11:24 static/image/common/back.gif
支持楼主的辛苦整理！
感谢支持~ {:9_598:}第三弹看的人好少呀，冒昧顶起。 感谢分享啊！ E文，很难懂，搞网站的朋友用得上。 感谢分享啊！ 前排支持. 支持啦，很用心的帖子{:9_407:} 我ie10出现了兼容问题，就换成ie9模式下使用，也还好的说 谢谢楼主整理！多一个IE10，Web页面的兼容性就要多测试一个了TAT... 用谷歌路过 路过留用！！！！！！！ 必须要顶，大牛啊 ！！！！ 感谢分享喲.... 第三弹了，一路跟踪而来，三弹了，弹走鱼尾纹拉！！！
页:
[1]