internet explorer 9 兼容性问题分析实战虚拟实验室.pdf

Internet Explorer 9 兼容性问题分析实战 1 目标 通过这个动手实验室，您可以学习到：  使用 IE 兼容性测试工具和开发人员工具查找并分析兼容性问题  使用兼容性视图  配置 Internet Explorer 兼容性视图组策略设置  使用 Microsoft Expression Web SuperPreview 发现不同浏览器之间的布局差异 1.1 虚拟机环境介绍 该动手实验环境需要一台运行 Windows Server 2008 R2 的域控制器以及一台安装有应用程序兼容性工具 包（Application Compatibility Toolkit）和 Microsoft Expression Web SuperPreview 4 的 Windows 7 客户端，均以虚拟机的形式提供： 虚拟机 1 IE9_HOL_Win7 （Windows 7 企业版 SP1 32 位） 虚拟机 2 IE9_HOL_Win2008R2 （Windows Server 2008 R2 企业版 SP1） 完成该实验大约需要 35 分钟 提示： 1. 如需登录，请使用用户名：FABRIKAM\Administrator 密码：Password1 2 动手实验室操作脚本 2.1 使用 IE 兼容性测试工具 2.1.1 使用 IE 兼容性测试工具收集兼容性问题 有位用户报告他们所使用的时间表应用最近发生了问题：用户浏览该网站时，页面的显示格式不正确。

在本 练习中，你将使用 IE9 中内置的开发人员工具来重现并解决用户遇到的问题 任务 步骤 提示：以下任务在 IE9_HOLs_Win7 虚拟机上完成 1. 打开问题网站 提示：由于本实验处于虚拟环境中，因此可能会出现激活提示，请勿理会该提 示，继续进行实验 1. 在桌面上双击 Internet Explorer Compatibility Test Tool 2. 在 Microsoft Internet Explorer Compatibility Test Tool (IECTT) 的工具 栏上单击 Enable 按钮 2. 打开实验网站， 开始登录 1. 在桌面上双击 Lab Website 提示：在 IE8 中，你可能会在状态栏上看见一个气泡提示，这是提示用户浏览 器正处于兼容性事件记录模式该图标在 IE9 中不可见，但 IECTT 仍然会对事 件进行记录 2. 请注意地址栏上显示的地址 提示：你还会注意到，虽然本网站运行在本地，但并未使用“Localhost”作为 网址，而是回环 IP 地址，这样可以模拟浏览器与 Internet 页面交互的情形 3. 单击事件链接， 创建事件 1. 单击 Events Demos，事件链接将在 IECTT 中生成事件。

请分别单击以下 一些事件，例如 1021, 1023, 1026, 1027 和 1028 提示：浏览器将持续捕获兼容性事件，即使重新启动浏览器，也将继续进行记 录，直到 IECTT 日志记录机制被停用本测试网站所包含的页面可以触发特定 的兼容性事件 2. 最小化 IE 3. 在 IECTT 窗口中滚动浏览已记录的数据 提示：在列表中应该出现一系列已记录的事件 4. 单击 Event 1040 查看 CSS 兼容性问题 1. 回到 IE 窗口， 并后退到事件演示链接页面， 单击 Event 1040 - Cascading Style Sheet 提示：默认情况下，本页会将一些文本浮动显示到文本框的外部在 IE6 浏览 器中，这些文本应该全部显示在文本框以内这一差异是因为从 IE8 开始，对 “框模型”进行了更改，以使 CSS 符合标准这在 IE 以标准模式访问 Intenet 站点时，是一个常见的问题，除非页面或响应标头明确要求以其它模式显示 2. 按下 F12 键，打开开发人员工具窗口 提示：F12 键将打开开发人员工具窗口，我们可以使用该工具以不同模式查看 网页IE6 允许 Web 开发人员选择浏览器显示 Web 页面的方式。

默认的模式 是“Quirks（杂项）模式”，它将网页按照旧版 IE 浏览器的显示方式来显示 “标准模式”（也叫做严格模式）对业界标准支持得最完善，但如果要使用增 强的功能，网页代码中需要包含相应的 Doctype 值 3. 请调整窗口，使你能够同时看到开发人员工具窗口和网页上的信息 4. 在开发人员工具的菜单栏上单击文档模式：IE9 标准，然后单击 Quirks 模 式 提示：这一操作将解决文本出界问题，但同时也会触发其他的非标准 CSS 代码 生效，导致文本颜色变为蓝色 5. 在 IECTT 中查 看事件 1. 单击文档模式：杂项，然后单击 IE9 标准（页面默认） 2. 按下 F12 键，关闭开发人员工具，然后最小化 IE 3. 在 IECTT 窗口中，单击一个事件 4. 在底部窗格中查看该事件相关的信息及问题描述 5. 查看其他事件的描述 提示：此时，IECTT 应该已经捕获了相当多的数据，按照时间顺序排列你可 以筛选要显示的数据类别选中某个问题之后，你可以看到与该问题相关的描 述，以及一个相关的 IE 应用程序兼容性网页的链接 6. 在 MSDN 上查 看事件描述，并 停止收集事件 1. 在如果可以连接到 Internet，在 IE 中浏览到 ，了解每一种 IE 兼容性事件的详细信息。

提示： 本实验环境的虚拟机没有连接到 Internet， 因此本步骤可以跳过 在 IECTT 中，每个事件描述都包含了一个指向本文档的链接，据此可以查找到更多关于 这些事件的信息，包括如何修复这些问题 2. 最后，在 IECTT 窗口的工具栏中单击 Disable 2.1.2 使用应用程序兼容性管理器分析兼容性事件 Application Compatibility Manager (ACM，即应用程序兼容性管理器)是一个帮助你配置、收集和分析数 据，以便在企业部署新版操作系统之前解决兼容性问题的工具在本练习中，你将从 IECTT 中导入数据，并 使用 ACM 分析它们 任务 步骤 提示：以下任务在 IE9_HOLs_Win7 虚拟机上完成 1. 上传并保存数 据 1. 在 IECTT 窗口的工具栏上单击 Upload 提示：上传操作会将已经捕获的所有数据保存到一个 CAB 文件中，以便导入到 数据库中 2. 在另存为对话框中， 从左侧文件夹窗格中选择桌面， 然后单击保存按钮将该 文件保存在桌面 3. 关闭 IECTT 窗口 2. 使用 ACT 配置 向导配置 ACM 1. 在桌面上双击 Application Compatibility Manager。

2. 在应用程序兼容性工具包配置向导中单击 Next 提示： 首次启动 ACM 时需要执行一些基本的配置 在使用该配置工具配置完成 之后，下一次 ACM 将直接启动 3. 在 Select the Configuration Options 页面选择 Enterprise configuration，然后单击 Next（如果选项为灰色，请单击 Restart with elevated privileges 按钮） 4. 在 Configure your ACT Database Settings 页面，在 SQL Server 列表中 单击(local) ，然后单击 Connect 5. 在 Database 字段中键入 AppData，然后单击 Create 6. 单击 Next 7. 在 Configure Your Log File Location 页面上单击 Browse 提示：ACT 可以监视某个文件夹，并且自动处理这些文件夹中的 CAB 文件 这对于那些要从许多测试人员那里收集数据，并且在同一个数据库中进行处理 时非常有用 8. 在浏览文件夹对话框中选择 C:\ ，然后单击新建文件夹按钮。

9. 键入 Data，然后回车确定 10. 单击确定，然后单击 Next 11. 在 Configure Your ACT Log Processing Service account 页面上单击 Next ，然后单击 Finish 3. 将 Issue.CAB 文件复制到共 享文件夹 12. 点击任务栏左右侧的显示桌面按钮 13. 在桌面上找到 Issues.cab，右键单击该图标，选择剪切 14. 浏览到 C:\Data，在空白处单击右键，选择粘贴 提示：请注意日志解析服务会立即处理该文件，然后创建 Processed 和 Uncompressed 文件夹，用于保存解析结果如果你在其中发现了 Failed， 而不是 Processed 文件夹，请执行以下步骤： a) 打开 Failed 文件夹，右键单击其中的 xml 文件，选择编辑 b) 在记事本窗口中单击编辑，然后选择查找 c) 在查找窗格中键入 OSInfo 并回车 d) 将 OSInfo ID = 之后的值从 6.1.1 更改为 6.1.0 e) 保存并关闭记事本 f) 右键单击该 xml 文件，选择剪切 g) 返回 C:\Data 文件夹，右键单击空白处，选择粘贴。

几秒钟之后，你应该 能够看到 Processed 文件夹，其中的数据已经被导入到 ACT 数据库中 出现本问题的原因是，在本练习中的客户端计算机运行 Windows 7 SP1 版本， ACT 默认不支持该版本上述步骤是将日志文件中的操作系统版本信息由 Windows 7 SP1（6.1.1）降级为 Windows 7（6.1.0），以便绕过此问题要 完全解决该问题， 请参考 页面中 的说明，或者将 ACT 升级到支持 Windows 7 SP1 的版本 4. 在 ACM 中查看 详细信息 1. 切换到应用程序兼容性管理器，从左侧的导航窗格中单击 Analyze 2. 在分析窗格下的 Internet Explorer 分支中单击 Web Sites 提示：应用程序兼容性管理器可以显示由于各种原因引起的事件在分析 （Analyze）视图中，我们可以看到问题及其状态收集（Collect）视图用于 管理收集的数据包 3. 在详细信息窗格中双击 Event_1027.htm 条目 4. 在问题列表中双击第一项 提示：你可以双击任何一个问题，查看其详细信息其中的 Priority（优先级） 和 Severity（严重性）只是基于该问题的类型而做出的，并不代表该问题需要 紧急修复的程度。

5. 关闭该窗口，然后再关闭问题列表窗口 6. 在详细信息窗格中右键单击 Event_1028.htm 条目 提示：在某个事件的右键菜单中，你可以为该问题设置优先级，指派分类，设 置评级（例如忽略某个警告信息之后网页其实可以正常操作，或者已经有文档 可以解决该问题），以及针对该问题的解决方案目前处于哪种部署状态 7. 单击 Set Priority 8. 选择 Priority 2 – Important，然后单击 OK 9. 关闭 Microsoft Application Compatibility Manager 窗口 2.2 使用开发人员工具、兼容性视图和 SuperPreview 2.2.1 使用开发人员工具编辑 HTML 标记的属性和类 在本练习中， 你将了解到如何使用开发人员工具来修改 HTML 和 CSS 的属性， 并且实时预览网页的变化， 以及兼容性视图在 IE 中的各种用处你还将了解到最新版的 Microsoft Expression Web 4 SuperPreview 工具如何帮助你轻松发现网页在多款浏览器上的布局差异 在本练习中，你将使用开发人用工具来编辑 HTML 属性和类。

任务 步骤 提示：以下任务。