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

1、 Internet Explorer 9 兼容性问题分析实战 1 目标 通 过这个动手实验室，您可以学习 到 ： 使用 IE 兼容性测试工具 和 开发人员工具 查找并分析兼容性问题 。 使用 兼容性视图 配置 Internet Explorer 兼容性视图组策略 设置 使用 Microsoft Expression Web SuperPreview 发现 不同浏览器之间的布局差异 1.1 虚拟机环境介绍 该动手实验环境 需要一台 运行 Windows Server 2008 R2 的域控制器 以及一台安装有应用程序兼容性工具包（ Application Compatibility Toolki

2、t）和 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. 如需 登录 ，请 使用用户名： FABRIKAMAdministrator 密码： Password1 2 动手实验室操作脚本 2.1 使用 IE 兼容性测试工具 2.1.1 使用 IE 兼容性

3、测试工具 收集 兼容性 问题 有位用户 报告 他们所使用的 时间 表 应用 最近发生了问题 ：用户浏览该网站时， 页面的显示格式不正确。 在本练习中， 你将使用 IE9 中内置的开发人员工具 来 重现 并解决用户 遇到的问题。 任务 步骤 提示： 以下任务在 IE9_HOLs_Win7 虚拟机上完成。 1. 打开 问题网站 提示： 由于本实验 处于虚拟环境中， 因此可能会出现 激活提示 ，请勿理会该提示， 继续进行实验。 1. 在桌面上双击 Internet Explorer Compatibility Test Tool。 2. 在 Microsoft Internet Explorer C

4、ompatibility Test Tool (IECTT) 的工具栏上单击 Enable 按钮 。 2. 打开实验网站 ，开始登录 1. 在桌面上双击 Lab Website。 提示： 在 IE8 中， 你可能会在状态栏上看见一个气泡提示 ，这是提示用户 浏览器正处于 兼容性事件记录 模式 。 该图标在 IE9 中不可见，但 IECTT 仍然会对事件进行记录。 2. 请注意地址栏上显示的地址。 提示： 你还会注意到 ，虽然本网站运行在本地， 但 并未使用“ Localhost”作为网址， 而是回环 IP 地址， 这样可以模拟 浏览器与 Internet 页面交互的 情形。 3. 单击事件链接

5、，创建事件 1. 单击 Events Demos，事件链接 将在 IECTT 中生成事件。 请 分别 单击以下一些事件 ，例如 1021, 1023, 1026, 1027 和 1028。 提示： 浏览器将持续捕获兼容性事件， 即使 重新启动浏览器 ，也 将 继续 进行记录，直到 IECTT 日志记录机制被停用。 本测试网站所包含的页面 可以触发特定的兼容性事件。 2. 最小化 IE。 3. 在 IECTT 窗口中滚动浏览已记录的数据。 提示： 在列表中应该出现一系列 已记录的 事件。 4. 单击 Event 1040 查看 CSS兼容性问题 1. 回到 IE 窗口 ，并后退到事件 演示 链接

6、 页面 ， 单击 Event 1040 - Cascading Style Sheet。 提示： 默认情况下， 本页会将 一些文本浮动显示到文本框的外部。 在 IE6 浏览器中，这些文本应该全部显示在文本框以内。 这一差异是因为 从 IE8 开始 ，对“框模型” 进行了更改， 以使 CSS 符合标准。 这在 IE 以标准模式访问 Intenet站点时，是一个常见的问题 ，除非页面或 响应标头 明确要求以其它模式显示。 2. 按下 F12 键，打开 开发人员工具窗口。 提示： F12 键将打开开发人员工具窗口 ，我们可以使用该工具以不同模式查看网页。 IE6 允许 Web 开发人员 选择浏览器显

7、示 Web 页面的 方式。默认的模式是“ Quirks（杂项） 模式” ，它将网页按照旧版 IE 浏览器的 显示方式来显示。“标准模式” （也叫做 严格模式 ） 对业界标准支持得最完善 ，但 如果要使用增强的功能， 网页代码中需要包含相应的 Doctype 值。 3. 请调整窗口，使你能够同时看到开发人员工具窗口和网页上的信息。 4. 在开发人员工具的菜单栏上单击 文档模式 ： IE9 标准 ，然后单击 Quirks 模式 。 提示： 这一操作将解决文本出界问题，但同时也会触发其他的非标准 CSS 代码生效，导致文本颜色变为蓝色。 5. 在 IECTT 中查看事件 1. 单击 文档模式：杂项

8、，然后单击 IE9 标准（页面 默认 ） 2. 按下 F12 键， 关闭开发人员工具，然后最小化 IE。 3. 在 IECTT 窗口中 ，单击一个事件。 4. 在底部窗格中查看该事件相关的信息及问题描述。 5. 查看其他事件 的描述。 提示： 此时， IECTT 应该已经捕获了相当多的数据，按照时间顺序排列 。你可以 筛选要显示的数据 类别。选中某个问题之后， 你可以看到与该问题相关的描述 ，以及一个相关的 IE 应用程序兼容性网页的链接。 6. 在 MSDN 上查看事件描述 ，并停止收集事件 1. 在 如果可以连接到 Internet，在 IE 中浏览到http:/ 了解 每一种 IE 兼容

9、性事件的详细信息。 提示： 本实验环境的虚拟机没有连接到 Internet，因此本步骤可以跳过。 在 IECTT中， 每个 事件 描述都包含了一个 指向本文档的链接 ， 据此可以 查找到 更多 关于这些事件的信息， 包括 如何 修复 这些问题 。 2. 最后， 在 IECTT 窗口的工具栏中单击 Disable。 2.1.2 使用应用程序兼容性管理器 分析 兼容性 事件 Application Compatibility Manager (ACM， 即应用程序兼容性管理器 )是一个 帮助你 配置、收集和分析数据 ，以便在企业部署新版操作系统之前解决兼容性问题的 工具。 在本练习中， 你将从 I

10、ECTT 中导入数据， 并使用 ACM 分析它们。 任务 步骤 提示： 以下任务在 IE9_HOLs_Win7 虚拟机上完成。 1. 上传并保存数据 1. 在 IECTT 窗口的工具栏上单击 Upload。 提示： 上传操作会将已经捕获的所有数据 保存到一个 CAB 文件中， 以便导入到数据库中。 2. 在另存为对话框中 ，从左侧文件夹窗格中选择 桌面 ，然后 单击 保存 按钮 将该文件保存在桌面 。 3. 关闭 IECTT 窗口。 2. 使用 ACT 配置向导配置 ACM 1. 在桌面 上双击 Application Compatibility Manager。 2. 在 应用程序兼容性工具

11、包配置向导中单击 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. 在 Da

12、tabase 字段中 键入 AppData，然后单击 Create。 6. 单击 Next。 7. 在 Configure Your Log File Location 页面上单击 Browse。 提示： ACT 可以监视某个文件夹， 并且 自动处理这些文件夹中的 CAB 文件。这对于那些要从许多测试人员那里收集数据，并且在同一个数据库中进行处理时非常有用。 8. 在 浏览文件夹 对话框中 选择 C: ， 然后单击 新建文件夹 按钮 。 9. 键入 Data，然后回车 确定 。 10. 单击 确定 ，然后单击 Next。 11. 在 Configure Your ACT Log Process

13、ing Service account 页面上 单击 Next ，然后单击 Finish。 3. 将 Issue.CAB文件复制到共享文件夹 12. 点击任务栏左右侧的 显示桌面 按钮 。 13. 在桌面上找到 Issues.cab，右键单击该图标，选择 剪切 。 14. 浏览到 C:Data，在空白处单击右键， 选择 粘贴 。 提示： 请注意 日志解析 服务 会立即处理该文件， 然后创建 Processed 和 Uncompressed 文件夹，用于保存 解析结果。 如果你在其中发现了 Failed，而不是 Processed 文件夹， 请执行以下步骤： a) 打开 Failed 文件夹，

14、右键单击 其中的 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 默认不支持该版本 。上述

15、步骤是将 日志文件中的操作系统版本信息由Windows 7 SP1（ 6.1.1）降级为 Windows 7（ 6.1.0） ， 以便绕过 此 问题 。 要完全解决该问题，请 参考 http:/ 页面中的说明，或者 将 ACT 升级到支持 Windows 7 SP1 的 版本。 4. 在 ACM 中查看详细信息 1. 切换到 应用程序兼容性管理器 ，从 左侧的 导航窗格中 单击 Analyze。 2. 在分析窗格下的 Internet Explorer 分支中单击 Web Sites。 提示： 应用程序兼容性管理器 可以显示由于各种原因 引起 的 事件 。在 分析（ Analyze） 视图中，

16、 我们可以看到 问题 及其 状态 。收集 （ Collect） 视图 用于管理收集的数据包。 3. 在详细信息窗格中双击 Event_1027.htm 条目 。 4. 在问题列表中 双击第一项。 提示： 你可以双击任何一个问题，查看其详细信息。其中的 Priority（优先级）和 Severity（严重性） 只是基于该问题的类型而做出的，并不代表 该问题需要紧急 修复 的 程度。 5. 关闭 该 窗口，然后 再 关闭 问题列表窗口。 6. 在详细信息窗格中 右键单击 Event_1028.htm 条目。 提示： 在某个事件的右键菜单中，你可以为该问题 设置优先级，指派分类， 设置评级 （例如忽

17、略某个警告信息之后 网页其实 可以正常操作，或者已经有文档可以解决该问题） ，以及针对该问题的解决方案 目前处于哪种部署状态。 7. 单击 Set Priority 8. 选择 Priority 2 Important，然后单击 OK。 9. 关闭 Microsoft Application Compatibility Manager 窗口。 2.2 使用开发人员工具 、 兼容性视图 和 SuperPreview 2.2.1 使用开发人员工具 编辑 HTML 标记的 属性和类 在 本练习 中，你将了解到 如何使用开发人员工具 来 修改 HTML 和 CSS 的属性，并且 实时 预览网页的变化

18、，以及兼容性视图在 IE 中的各种用处 。 你还将 了解到 最新版的 Microsoft Expression Web 4 SuperPreview 工具 如何帮助你轻松发现 网页在多款 浏览器上 的 布局 差异。 在本练习中，你将使用开发人用工具来编辑 HTML 属性和类。 任务 步骤 提示： 以下任务在 IE9_HOLs_Win7 虚拟机上进行。 1. 打开 开发人员工具，更改实验网站中的文本 1. 在 桌面上双击 Lab Website，然后单击 IE8 DevTools。 2. 单击 DevToolsDemo。 3. 按 F12 打开开发人员工具窗口 。 4. 调整 两个窗口，以便可以

19、同时查看到其中的内容。 5. 从开发人员工具窗口 的左侧窗格 中 ，从 html 标记 下 依次展开 body、 div、div、 h1， 选择 含有 J-Foto Gallery 文字的标题，如下图所示： 6. 从右下角系统托盘处点击 EN 输入法状态图标，选择 CH 中文输入法， 将文本 更改为 我的照片库 ， 然后回车 。 提示： 单击 某个属性或值均可 对其 进行编辑。在你编辑 H1 元素之后， IE 窗口中的网页标题 会自动 变化 。 2. 更改 网页中的属性 1. 在左侧 窗格 中单击 h1 style 元素。 2. 在右侧 窗格中 单击 属性 按钮。 3. 在名称栏中 单击 st

20、yle 下方的单元格 ， 然后选择或键入 float。 4. 在 右侧的值中键入 right 并回车。 提示： 你可以通过属性视图来添加 /更改或移除 任何属性。 为标题添加 “float” 属性，并赋值 “right” 可以使标题 对齐到页面右侧 。 5. 在名称列中 单击 float 下方 的 单元格，然后 选择或键入 padding-bottom。 6. 在 相应的 值 列中 键入 50px 并回车 。 提示： 操作之后 ， 注意 网页 标题和图片之间的间距会加大 。 7. 在名称列中单击 padding-bottom 下方的单元格，在列表中选择 color。 8. 在值列 中键入 #c

21、c00ff （中间两位为数字 0，不是 字母 O） 并回车。 提示： 注意网页中标题的颜色会发生变化 。 9. 可以 在菜单栏的 工具 中单击 显示颜色 选 取器 ， 使用鼠标指针从网页中选取一种颜色 。 提示： 除了 输入 上述 十六进制 颜色值 以外 ，你 还 可以使用 单击网页上其他元素的方式，让 颜色拾取器 帮助你 预览并选择现有的颜色 值 ，并将其数值复制到剪贴板中供你使用。 3. 浏览开发人员工具视图 1. 在右侧窗格中单击 样式 和 跟踪样式 按钮。 2. 在右侧窗格中 反复清除并重新选中其中的复选框， 查看网页的变化。 提示： 样式选项卡和跟踪样式视图 比较类似。样式选项卡中按

22、照 各个 层级 表的顺序 列出 所选元素 的 所有 样式规则 ，包括已被其他规则覆盖的那些规则 。跟踪样式 则按 实际的 属性 进行排列 ，而不是按层级规则 。 3. 单击 布局 按钮 ，尝试修改各项数值 。 提示： 布局选项卡以可视化的方式展示 所选元素 的“框模型” 结构及其相关的数值。 4. 浏览 CSS 模式 1. 单击 IE 窗口，然后按 F5 键刷新网页。 2. 在开发人员工具窗口中单击 CSS 选项卡。 提示： 开发人员工具包括 HTML、 CSS 和脚本模式。 每个模式都提供了用于分析和调试该内容 的 工具 。在 html 模式中， 你可以查看 IE 页面的 DOM 树 结构

23、。DOM 树同时包含元素及其属性和值。 在 CSS 模式中，你可以选择该网页中应用的所有 CSS 文件 ，以查看 该文件中所有的样式规则。 3. 在 右上角 搜索 CSS 文本框中 键入 nav 并回车。 4. 清除并重新选择 navPane 复选框 ，查看样式变化。 5. 切换其他 样式属性 的复选框，观察页面布局如何变化。 6. 按 F12 键关闭开发人员工具窗口 ，然后关闭 IE 窗口 。 2.2.2 了解并配置兼容性视图 默认情况下， IE9 按照 非常接近 业界标准 的方式 来显示基于标准的网页。 某些网页 在标准模式下可能显示不正常。要 让其正常显示，用户可以尝试使用兼容性视图。

24、在本练习中，你将了解到如何使用兼容性视图改善网页的外观。 任务 步骤 提示： 以下任务在 IE9_HOLs_Win7 虚拟机上进行。 1. 使用开发人员工具更改页面的兼容性模式，并观察变化 1. 从桌面上双击 Internet Explorer 图标 ， 将 自动打开主页 http:/localhost 2. 按 F12 键打开开发人员工具 。 提示： 打开该窗口之后，你可以看到，该网页的浏览器模式和文档模式使用了IE9 的标准 模式 。 3. 在 IE 地址 栏上单击 兼容性视图 按钮。 提示： 兼容性视图按钮 位于地址栏的 刷新按钮左侧 ，图标类似于 一张被分成两半的纸张。 启用之后会对该

25、域名下的所有页面使用兼容性模式进行显示。 4. 在开发人员工具 窗口中 注意 浏览器模式和文档模式 的变化 。 提示： 在开发人员工具窗口中 可以看到 浏览器模式已更改为兼容性模式，文档模式已更改为 IE7 标准。 按 F12 键关闭开发人员工具窗口。 2. 查看兼容性视图设置 1. 右键单击 IE 右上角的 工具 按钮，选择 命令栏 。 2. 在命令栏的工具菜单中 选择 兼容性视图设置 。 提示： 兼容性视图列表中定义了要自动以兼容性视图显示的网页。在该对话框中你还可以选择“在兼容 性 视图 中显示所有网站” ，强制所有网站使用兼容性视图。 3. 单击 取消 。 3. 查看兼容性视图列表，并

26、访问列表中的某个站点 1. 在 IE 中 浏览到 本机硬盘中的 %LocalAppData%MicrosoftInternet ExplorerIECompatDataiecompatdata.xml 文件 。 2. 滚动浏览该文件。 提示： 兼容性视图列表是一个由 Microsoft 维护的 XML 文件 ，其最新的 更新 版本位于 http:/ 3. 打开一个新的选项卡 ，并浏览到 （ 由于本实验环境未连接到Internet， 实际上 您可以跳过 3-4 步骤 ） 提示： 注意观察，地址栏上不会出现 兼容性视图按钮。 4. 按 F12 键 打开开发人员工具 窗口 。 提示： 包含在兼容性视

27、图列表中 的站点会 自动以兼容性视图显示 ，浏览器模式为 IE9 兼容性视图 ，文档模式为 IE7 标准。 此时地址栏上不会出现兼容性视图按钮。 5. 关闭所有窗口。 提示： 以下任务在 IE9_HOLs_Win2008R2 虚拟机上进行。 4. 创建新的GPO，并链接到该域 1. 在桌面上双击 组策略管理 。 2. 在控制台窗格中 依次 展开 林 ： ，域 ， 。 3. 右键单击 ， 然后选择 在这个域中创建 GPO,并在此处链接 。 4. 在新建 GPO 窗口的名称字段中键入 “ IE 兼容性设置 ” ，然后单击 确定 。 5. 查看并修改 IE兼容性视图组策略设置 1. 在控制台窗格中展

28、开 组策略对象 ，右键单击 IE 兼容性设置 ， 然后单击 编辑 。 2. 在组策略管理编辑器窗口的 计算机 配置 下，依次展开 策略、管理模板、Windows 组件、 Internet Explorer，然后选 择兼容性视图 。 提示： 在计算机配置和用户配置下均可找到 兼容性视图设置 。 3. 在详细信息窗格中双击 打开 Internet Explorer 7 标准模式 。 提示： 如果启用此设置， IE 将使用 IE7 的 User-Agent 字符串 （比 IE9 包含 更多 附加字符串） ，并且所有 标准模式的 网页将 以 IE7 标准模式 来显示 。 此选项对旧版网页有最佳的兼容性

29、， 但以 Web 标准编写的新网页可能会显示不正常。 4. 单击 下一个设置 ， 转到 关闭兼容性视图 。 提示： 如果关闭兼容性视图， 用户将无法使用兼容性视图按钮，也不能管理兼容性视图列表。 5. 单击 下一个设置 ， 转到 为本地 Intranet 打开 IE 标准模式 。 提示： Intranet 站点 （企业内部网站） 配置为自动以兼容性视图显示，虽然能够解决旧版网页的兼容问题，但 使用 Web 标准编写的新版网页可能会显示不正常。如果不希望锡业内部网站 以兼容性视图显示， 可以启用该设置。 6. 在 为本地 Intranet 打开 Internet Explorer 标准模式 对话

30、框中， 单击 已启用 ，然后单击 下一个设置 。 提示： 通过关闭兼容性视图按钮 设置 ，你可以禁止用户使用该按钮，但是 由于并没有启用之前“关闭兼容性视图”的何止，因此 他们仍然可以 使用工具菜单管理 兼容性视图。 7. 在关闭兼容性视图按钮对话框中单击 已 启用 ，然后单击 下一个设置 。 提示： 如果你希望使用微软提供的兼容性列表， 你应该 启用 包括来自 Microsoft的更新的网站列表 设置 。 8. 在 启用包括来自 Microsoft 的更新的网站列表 对话中 单击 已启用 ，然后单击 下一个设置 。 提示： 你可以制定哪些网站强制以 IE7 兼容性视图显示。启用该设置之后，用

31、户可以继续向兼容性视图列表添加网站，但却不能从其中删除你已经指定的网站。 9. 单击 确定 。 10. 关闭组策略管理编辑器和组策略管理窗口。 提示： 以下任务在 IE9_HOLs_Win7 虚拟机上进行。 6. 手动更新组策略 1. 在桌面上 双击 命令提示符 。 2. 键入 gpupdate /force 并回车 。 3. 键入 exit 并回车 。 7. 确认组策略已在客户端上更新 1. 在桌面上双击 IE 图标 ，打开 主页 。 提示： 注意观察，地址栏上没有出现兼容性视图按钮。 2. 在工具菜单中单击 兼容性视图 。 提示： 你仍然可以通过工具菜单启用兼容性视图。 3. 在工具菜单中

32、单击 兼容性视图设置 。 提示： 你可以发现，在兼容性视图列表设置窗口中， 仍然可以添加网站到列表中，但是下方的某些设置已经被禁止选择。 4. 单击关闭。 2.2.3 使用 Expression Web SuperPreview 对于大部分 Web 开发人员， 为不同浏览器设计网页非常耗费时间 。大多数浏览器不能同时安装多个版本，新版会替换掉老版本。 Microsoft Expression Web SuperPreview 工具即可用来 简化测试和调试 不同浏览器间 网页布局差异的 过程 ，它内置了 IE 以外 其他 浏览器 的 支持， 因此你不需要安装 FireFox 和 Safari 等

33、浏览器就可以直接与 IE 相对比。 在本练习中，你将了解到 Microsoft Expression Web SuperPreview 如何帮助你发现网页兼容性问题。 任务 步骤 提示： 以下任务在 IE9_HOLs_Win7 虚拟机上进行。 1. 选择 基准浏览器 1. 在桌面上双击 Microsoft Expression Web 4 SuperPreview。 2. 如果出现购买对话框，请单击 关闭 。 提示： 此处提供的 SuperPreview 是试用版 ， 该版本 不具备与其他浏览器同时对比的功能 ，只能对比 IE 的不同版本 。 3. 在左侧窗格中单击 Internet Expl

34、orer 9。 2. 与 IE6 对比 实验网站 1. 在页面顶部的位置文本框中键入http:/127.0.0.1/labwebsite/Event_1040.htm 并回车。 2. 在右侧窗格中单击 Internet Explorer 6。 提示： 此网页包含在 IE9 中不能正常显示的 CSS 代码，除非使用 Quirks 模式。此差异可以通过并列对比直观的看到。 3. 查看 一个 公用网站 1. 如果连接到了 Internet，也可以 在 位置 文本框中键入 Internet 网址进行同样的对比 。 4. 浏览SuperPreview中的模式和设置 1. 在工具栏中单击 拖拽模式 按钮，

35、然后拖拽查看网页的不同区域。 提示： 拖拽模式 按钮 像一只手，该模式让你可以快速浏览文档的任何部位。 由于本实验使用虚拟环境，拖拽效果可能会有延迟。 2. 在工具栏上单击 选择模式 按钮。 提示： 默认的模式为选择模式，在该模式中可以通过鼠标指针选择页面上的DOM 元素。 3. 单击 一个链接或 文字 查看 两个窗格中的内容 分别 如何显示。 提示： 有两种不同的 突出显示 模式，默认情况下是“ 方 框 突出显示 模式” ，将突出显示 显示 你所选择或鼠标经过的 DOM 元素。 4. 在右下角 浏览器 大小 旁边， 选择 800x600。 提示： 你可以通过此设置重新渲染并预览不同屏幕分辨率

36、下的页面差异。 5. 在右下角 浏览器 大小 旁边选择 1024x768。 6. 在工具栏上单击 无光突出显示模式 按钮，然后在网页上单击不同的链接或图片。 提示： 无光突出显示模式 是 另一个 突出显示 模式 ，它将页面中除已选中区域之外的所有区域变暗， 对于查找细微差异非常有用。 7. 在工具栏上单击 方框 突出显示模式 按钮。 8. 在工具栏上单击切换 缩略图可见性 按钮 ，然后 在浏览器窗口中单击缩略图预览 的各个部位 。 提示： 缩略图可见模式下将显示整个文档的缩略图，直接在缩略图上拖拽或单击即可查看网页的不同区域。 9. 在工具栏上单击 覆盖布局 按钮。 提示： 覆盖布局按钮可以将一个网页的预览放在另一个网页之上，这样很容易就能发现微小的差异。 10. 在工具栏上单击 垂直拆分布局 按钮。 5. 查看 DOM 元素 1. 在底部栏中单击 DOM，然后 展开并单击其中的代码。 提示： 你可以单击其中的任何 DOM 元素，选中之后该元素将会高亮 。 2. 单击 预览窗口中 某个 链接或 文字 。 提示： 你可以直接在希望对比的 DOM 元素上单击。 这样 ，该元素会在 DOM树和预览窗格中同时被突出显示。 3. 最后 ， 关闭 Microsoft Expression Web 4 SuperPreview 窗口 即可 。