Internet Explorer 9 兼容性问题分析实战虚拟实验室.pdf_第1页
Internet Explorer 9 兼容性问题分析实战虚拟实验室.pdf_第2页
Internet Explorer 9 兼容性问题分析实战虚拟实验室.pdf_第3页
Internet Explorer 9 兼容性问题分析实战虚拟实验室.pdf_第4页
Internet Explorer 9 兼容性问题分析实战虚拟实验室.pdf_第5页
已阅读5页,还剩8页未读 继续免费阅读

下载本文档

版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领

文档简介

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. 如需登录,请使用用户名:FABRIKAMAdministrator 密码: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 属性和类。 任务 步骤 提示:以下任务在 IE9_HOLs_Win7 虚拟机上进行。 1. 打开开发人员 工具,更改实验 网站中的文本 1. 在桌面上双击 Lab Website,然后单击 IE8 DevTools。 2. 单击 DevToolsDemo。 3. 按 F12 打开开发人员工具窗口。 4. 调整两个窗口,以便可以同时查看到其中的内容。 5. 从开发人员工具窗口的左侧窗格中,从 html 标记下依次展开 body、div、 div、h1,选择含有 J-Foto Gallery 文字的标题,如下图所示: 6. 从右下角系统托盘处点击 EN 输入法状态图标,选择 CH 中文输入法,将文 本更改为我的照片库,然后回车。 提示:单击某个属性或值均可对其进行编辑。在你编辑 H1 元素之后,IE 窗口 中的网页标题会自动变化。 2. 更改网页中的 属性 1. 在左侧窗格中单击 h1 style 元素。 2. 在右侧窗格中单击属性按钮。 3. 在名称栏中单击 style 下方的单元格,然后选择或键入 float。 4. 在右侧的值中键入 right 并回车。 提示:你可以通过属性视图来添加/更改或移除任何属性。为标题添加“float” 属性,并赋值 “right”可以使标题对齐到页面右侧。 5. 在名称列中单击 float 下方的单元格,然后选择或键入 padding-bottom。 6. 在相应的值列中键入 50px 并回车。 提示:操作之后,注意网页标题和图片之间的间距会加大。 7. 在名称列中单击 padding-bottom 下方的单元格,在列表中选择 color。 8. 在值列中键入#cc00ff (中间两位为数字 0,不是字母 O)并回车。 提示:注意网页中标题的颜色会发生变化。 9. 可以在菜单栏的工具中单击显示颜色选取器, 使用鼠标指针从网页中选取一 种颜色。 提示:除了输入上述十六进制颜色值以外,你还可以使用单击网页上其他元素 的方式,让颜色拾取器帮助你预览并选择现有的颜色值,并将其数值复制到剪 贴板中供你使用。 3. 浏览开发人员 工具视图 1. 在右侧窗格中单击样式和跟踪样式按钮。 2. 在右侧窗格中反复清除并重新选中其中的复选框,查看网页的变化。 提示:样式选项卡和跟踪样式视图比较类似。样式选项卡中按照各个层级表的 顺序列出所选元素的所有样式规则,包括已被其他规则覆盖的那些规则。跟踪 样式则按实际的属性进行排列,而不是按层级规则。 3. 单击布局按钮,尝试修改各项数值。 提示:布局选项卡以可视化的方式展示所选元素的“框模型”结构及其相关的 数值。 4. 浏览 CSS 模式 1. 单击 IE 窗口,然后按 F5 键刷新网页。 2. 在开发人员工具窗口中单击 CSS 选项卡。 提示:开发人员工具包括 HTML、CSS 和脚本模式。每个模式都提供了用于分 析和调试该内容的工具。在 html 模式中,你可以查看 IE 页面的 DOM 树结构。 DOM 树同时包含元素及其属性和值。在 CSS 模式中,你可以选择该网页中应 用的所有 CSS 文件,以查看该文件中所有的样式规则。 3. 在右上角搜索 CSS 文本框中键入 nav 并回车。 4. 清除并重新选择 navPane 复选框,查看样式变化。 5. 切换其他样式属性的复选框,观察页面布局如何变化。 6. 按 F12 键关闭开发人员工具窗口,然后关闭 IE 窗口。 2.2.2 了解并配置兼容性视图 默认情况下,IE9 按照非常接近业界标准的方式来显示基于标准的网页。某些网页在标准模式下可能显示不 正常。要让其正常显示,用户可以尝试使用兼容性视图。 在本练习中,你将了解到如何使用兼容性视图改善网页的外观。 任务 步骤 提示:以下任务在 IE9_HOLs_Win7 虚拟机上进行。 1. 使用开发人员 工具更改页面 的兼容性模式, 并观察变化 1. 从桌面上双击 Internet Explorer 图标, 将自动打开主页 http:/localhost 2. 按 F12 键打开开发人员工具。 提示:打开该窗口之后,你可以看到,该网页的浏览器模式和文档模式使用了 IE9 的标准模式。 3. 在 IE 地址栏上单击兼容性视图按钮。 提示:兼容性视图按钮位于地址栏的刷新按钮左侧,图标类似于一张被分成两 半的纸张。启用之后会对该域名下的所有页面使用兼容性模式进行显示。 4. 在开发人员工具窗口中注意浏览器模式和文档模式的变化。 提示:在开发人员工具窗口中可以看到浏览器模式已更改为兼容性模式,文档 模式已更改为 IE7 标准。 按 F12 键关闭开发人员工具窗口。 2. 查看兼容性视 图设置 1. 右键单击 IE 右上角的工具按钮,选择命令栏。 2. 在命令栏的工具菜单中选择兼容性视图设置。 提示:兼容性视图列表中定义了要自动以兼容性视图显示的网页。在该对话框 中你还可以选择“在兼容性视图中显示所有网站”,强制所有网站使用兼容性 视图。 3. 单击取消。 3. 查看兼容性视 图列表,并访问 列表中的某个 站点 1. 在 IE 中浏览到本机硬盘中的 %LocalAppData%MicrosoftInternet ExplorerIECompatDataiecompatdata.xml 文件。 2. 滚动浏览该文件。 提示:兼容性视图列表是一个由 Microsoft 维护的 XML 文件,其最新的更新版 本位于 3. 打开一个新的选项卡,并浏览到 (由于本实验环境未连接到 Internet,实际上您可以跳过 3-4 步骤) 提示:注意观察,地址栏上不会出现兼容性视图按钮。 4. 按 F12 键打开开发人员工具窗口。 提示:包含在兼容性视图列表中的站点会自动以兼容性视图显示,浏览器模式 为 IE9 兼容性视图, 文档模式为 IE7 标准。 此时地址栏上不会出现兼容性视图按 钮。 5. 关闭所有窗口。 提示:以下任务在 IE9_HOLs_Win2008R2 虚拟机上进行。 4. 创建新的 GPO, 并链接到 该域 1. 在桌面上双击组策略管理。 2. 在控制台窗格中依次展开林: ,域, 。 3. 右键单击 ,然后选择在这个域中创建 GPO,并在此处链接。 4. 在新建 GPO 窗口的名称字段中键入“IE 兼容性设置”,然后单击确定。 5. 查看并修改 IE 兼容性视图组 策略设置 1. 在控制台窗格中展开组策略对象,右键单击 IE 兼容性设置,然后单击编辑。 2. 在组策略管理编辑器窗口的计算机配置下,依次展开策略、管理模板、 Windows 组件、Internet Explorer,然后选择兼容性视图。 提示:在计算机配置和用户配置下均可找到兼容性视图设置。 3. 在详细信息窗格中双击打开 Internet Explorer 7 标准模式。 提示:如果启用此设置,IE 将使用 IE7 的 User-Agent 字符串(比 IE9 包含更 多附加字符串),并且所有标准模式的网页将以 IE7 标准模式来显示。此选项 对旧版网页有最佳的兼容性,但以 Web 标准编写的新网页可能会显示不正常。 4. 单击下一个设置,转到关闭兼容性视图。 提示:如果关闭兼容性视图,用户将无法使用兼容性视图按钮,也不能管理兼 容性视图列表。 5. 单击下一个设置,转到为本地 Intranet 打开 IE 标准模式。 提示:Intranet 站点(企业内部网站)配置为自动以兼容性视图显示,虽然能 够解决旧版网页的兼容问题, 但使用 Web 标准编写的新版网页可能会显示不正 常。如果不希望锡业内部网站以兼容性视图显示,可以启用该设置。 6. 在为本地 Intranet 打开 Internet Explorer 标准模式对话框中, 单击已启用, 然后单击下一个设置。 提示:通过关闭兼容性视图按钮设置,你可以禁止用户使用该按钮,但是由于 并没有启用之前“关闭兼容性视图”的何止,因此他们仍然可以使用工具菜单 管理兼容性视图。 7. 在关闭兼容性视图按钮对话框中单击已启用,然后单击下一个设置。 提示: 如果你希望使用微软提供的兼容性列表, 你应该启用包括来自 Microsoft 的更新的网站列表设置。 8. 在启用包括来自 Microsoft 的更新的网站列表对话中单击已启用,然后单 击下一个设置。 提示:你可以制定哪些网站强制以 IE7 兼容性视图显示。启用该设置之后,用 户可以继续向兼容性视图列表添加网站,但却不能从其中删除你已经指定的网 站。 9. 单击确定。 10. 关闭组策略管理编辑器和组策略管理窗口。 提示:以下任务在 IE9_HOLs_Win7 虚拟机上进行。 6. 手动更新组策 略 1. 在桌面上双击命令提示符。 2. 键入 gpupdate /force 并回车。 3. 键入 exit 并回车。 7. 确认组策略已 在客户端上更 新 1. 在桌面上双击 IE 图标,打开主页。 提示:注意观察,地址栏上没有出现兼容性视图按钮。 2. 在工具菜单中单击兼容性视图。 提示:你仍然可以通过工具菜单启用兼容性视图。 3. 在工具菜单中单击兼容性视图设置。 提示:你可以发现,在兼容性视图列表设置窗口中,仍然可以添加网站到列表 中,但是下方的某些设置已经被禁止选择。 4. 单击关闭。 2.2.3 使用 Expression Web SuperPreview 对于大部分 Web 开发人员,为不同浏览器设计网页非常耗费时间。大多数浏览器不能同时安装多个版本, 新版会替换掉老版本。Microsoft Expression Web SuperPreview 工具即可用来简化测试和调试不同浏览 器间网页布局差异的过程,它内置了 IE 以外其他浏览器的支持,因此你不需要安装 FireFox 和 Safari 等浏 览器就可以直接与 IE 相对比。 在本练习中,你将了解到 Microsoft Expression Web SuperPreview 如何帮助你发现网页兼容性问题。 任务 步骤 提示:以下任务在 IE9_HOLs_Win7 虚拟机上进行。 1. 选择基准浏览器 1. 在桌面上双击 Microsoft Expression Web 4 SuperPreview。 2. 如果出现购买对话框,请单击关闭。 提示:此处提供的 SuperPreview 是试用版,该版本不具备与其他浏览器同时 对比的功能,只能对比 IE 的不同版本。 3. 在左侧窗格中单击 Internet Explorer 9。 2. 与 IE6 对比实验 网站 1. 在页面顶部的位置文本框中键入 /labwebsi

温馨提示

  • 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

评论

0/150

提交评论