设为首页 收藏本站
查看: 1156|回复: 0

企业IT管理员IE11升级指南【8】—— Win7 IE8和Win7 IE11对比

[复制链接]

尚未签到

发表于 2015-5-16 14:08:41 | 显示全部楼层 |阅读模式
企业IT管理员IE11升级指南 系列:
  【1】—— Internet Explorer 11增强保护模式 (EPM) 介绍
  【2】—— Internet Explorer 11 对Adobe Flash的支持
  【3】—— IE11 新的GPO设置
  【4】—— IE企业模式介绍
  【5】—— 不跟踪(DNT)例外
  【6】—— Internet Explorer 11面向IT专业人员的常见问题
  【7】—— Win7和Win8.1上的IE11功能对比
  【8】—— Win7 IE8和Win7 IE11对比
  【9】—— IE10与IE11的功能对比
  【10】—— 如何阻止IE11的安装
  【11】—— 通过SCCM 2012和WSUS部署Internet Explorer 11
  【12】—— 兼容视图列表介绍
  【13】—— 如何把IEMP迁移到GPP
  【14】—— IE11代理服务器配置
  【15】—— 代理自动配置脚本
  【16】—— 使用Compat Inspector快速定位IE兼容性问题
  【17】—— F12 开发者工具



Win7 IE8和Win7 IE11对比



Contents

简介... 5
Internet Explorer 9. 5
全面的浏览器性能... 5
引入“Chakra”,全新的 JavaScript 引擎... 5
对相同标记的 Web 标准支持... 5
利用基于 Windows 的 PC 的强大功能实现的新图形功能... 6
新功能列表... 6
通过标准支持实现互操作性改进... 7
级联样式表级别 3 (CSS3). 8
其他 CSS 功能... 19
数据 URI19
文档对象模型 (DOM) 改进... 20
引入增强的 DOM... 20
在 XML 与 DOM 之间进行分析和序列化... 21
文档对象模型 (DOM) 级别 2 和 3. 21
DOM 空白处理... 24
ECMAScript 5. 24
HTML5. 25
HTML5 地理位置... 25
HTML5 video 和 audio 元素... 25
HTML5 canvas 元素... 27
HTML 分析改进... 28
HTML5 选择 API30
HTML5 语义元素... 31
ICC 颜色配置文件... 31
选择器 API 级别 2. 31
可缩放的向量图形 (SVG). 32
基本形状... 33
剪辑、蒙版和合成... 36
坐标系、转换和单位... 38
文档结构... 38
渐变和图案... 38
交互性... 40
链接和视图... 42
绘制和颜色... 43
路径... 44
文本... 45
面向 Web 开发人员的新工具... 45
固定网站... 45
平台版本管理... 47
F12 开发人员工具... 49
Internet Explorer 10. 51
兼容性... 51
CSS. 51
高级布局... 52
视觉效果... 52
其他新增功能... 53
文档对象模型 (DOM). 53
F12 开发人员工具... 54
HTML5. 54
IndexedDB. 55
JavaScript. 56
SVG.. 56
性能... 57
Internet Explorer 11. 59
显示和方向... 59
全屏 API59
编辑... 59
辅助功能改进... 59
剪贴板图像支持... 59
命令标识符... 60
控件改进... 61
输入法编辑器 API61
F12 工具中的新增功能... 61
从头开始重建... 61
使用 UI 响应工具加快网页速度... 62
CSS、HTML 以及 JavaScript 自动完成... 62
屏幕和 GPS 模拟... 63
有意义的内存分析... 63
右键单击以检查... 64
图形... 64
画布增强功能... 64
高 DPI 支持... 64
WebGL. 64
JavaScript. 64
块范围的变量... 65
容器对象... 65
国际化 API65
__proto__ 属性... 65
布局... 65
边框图像... 65
设备固定的定位... 65
东亚和双向文本改进... 65
弹性框更新... 66
水平垂直文本支持... 66
网络和导航... 66
向后导航缓存... 66
网络优先级设置... 66
预呈现和预提取... 66
隐私和安全... 67
请勿跟踪 (DNT) 例外... 67
第三方 Cookie 阻止... 67
Web 加密 API68
触控... 68
Datalist 改进... 68
指针事件... 68
视频... 68
动态 TextTrack 对象... 69
简单传递配置文件 (SDP) 字幕样式... 69
流 XHR 缓存控制... 69
Windows 集成... 69
固定网站... 69







简介

Internet Explorer 11相对于Internet
Explorer 8 包含了三个主要版本的功能更新,本文按照不同的版本跟新内容介绍Windows7系统上Internet
Explorer 11相对于Internet Explorer 8的主要功能区别。

Internet Explorer 9

Internet Explorer 9 旨在帮助开发人员更好地了解 Internet Explorer 9 在平台以下方面的进展:


  • 全面的浏览器性能
  • Web 标准支持,用于帮助使相同标记在不同浏览器中以相同方式工作
  • 利用
    Windows PC 强大功能的新图形功能

全面的浏览器性能

浏览器性能涉及浏览器中许多不同的子系统。不同的网站(以及同一网站中的不同活动)会对浏览器产生不同的负载和需求。例如,与新闻聚合网站(如必应资讯或Digg)相比,Web 应用程序(如Windows Live Mail或Microsoft Office Web Apps)以完全不同的方式使用浏览器子系统。

引入“Chakra”,全新的 JavaScript
引擎


脚本引擎性能只是总体浏览器性能状况的一部分。与 Internet Explorer 7 相比,Internet Explorer 8 中的脚本性能取得了指数级的改进幅度,Internet Explorer 9 中的新 JavaScript 引擎“Chakra”同样也是如此。Chakra 引擎可并行解释、编译和执行代码,并且能够利用多个(如果有)CPU 内核的优势。有关详细信息,请参阅IE
团队博客上的“ Internet
Explorer 9 中的新 JavaScript 引擎”(英文)。
当然,Internet Explorer 团队正在关注实际网站使用本浏览器所有子系统时的性能特征。目标是为实际网站提供更好的全面性能,而不仅仅是基准性能。

对相同标记的
Web 标准支持


Internet Explorer 向 Web 开发人员提供丰富的可互操作功能。Internet Explorer 团队知道,您不希望一次又一次地重复编写和重复测试网站;浏览器供应商采用标准可以很好地实现这一目标。

Internet Explorer 8 中,Internet Explorer 团队实现了 CSS 2.1 的高互操作性实现,同时向万维网联合会 (W3C) 贡献了包含 7200 多个测试的测试套件。这十分重要。如果没有验证测试,标准会更加难以一致地实现,从而难于供网站开发人员使用。
Internet Explorer 9 在标准支持和互操作性方面进行了重大改进。例如,Internet Explorer 9 新增了对 HTML5 的支持,可以对很多 CSS3 功能提供更好的支持,提供对 SVG 的内置支持(对于 Internet Explorer 而言,这是第一次)。

利用基于
Windows 的 PC 的强大功能实现的新图形功能


Windows 生态系统实现了令人惊叹的硬件创新。通过 Internet Explorer 9,现在,Web 开发人员可以利用硬件创新进行硬件驱动的图形和文本呈现。
Internet Explorer 9 使用 DirectX 系列的 Windows 应用程序编程接口 (API),为 Web 开发人员实现了几方面的改进。通过 Direct2D 和 DirectWrite,所有的图形和文本呈现功能都由图形卡而不是 CPU 实现。利用图形硬件加速,意味着图片丰富、需要处理大量图形的网站可以更快地在 Windows 上呈现,同时减少占用 CPU 资源。此外,使用习惯的标准创作网站时,您可以自动利用这些改进。

新功能列表

为方便起见,此列表包含 Internet Explorer 9 中的所有新增开发人员功能。有关 Internet Explorer 9 的预发布内部版本的更改信息,请参阅修订历史记录。


  • 增强的
    CSS3 支持

    • 通过border-radius属性实现圆角
    • CSS3 背景和边框功能
    • opacity属性
    • RGBA、HSL 和 HSLA 颜色模型
    • CSS3 字体属性和新 Web 字体格式
    • CSS3 媒体查询
    • CSS3 命名空间
    • CSS3 值和单位
    • CSS3 选择器

  • 改进的数据 URI 支持
  • 文档对象模型 (DOM) 改进

    • 增强的
      DOM 功能
    • 在 XML 与 DOM 之间进行分析和序列化
    • 新的 DOM 级别 2
      (L2) 和级别 3 (L3) 支持以及更新的行为

      • DOM 核心(L2、L3)和视图 (L2)
      • DOM 元素遍历
      • DOM 事件(L2、L3)
      • DOM L2 HTML
      • DOM L2 样式
      • DOM L2 遍历和范围

    • 新的空白处理行为

  • ECMAScript 功能增强
  • 新增的
    HTML5 支持

    • 地理位置
    • videoaudio元素
    • canvas元素
    • Selection接口
    • 改进的
      HTML 元素分析
    • 文本选择
      API

  • 对图像的
    ICC v2 和
    v4 颜色配置文件支持
  • msMatchesSelector方法的新选择器 API 级别 2 支持
  • SVG 功能

    • 基本形状:矩形、圆形、椭圆、直线、折线和多边形
    • 剪辑、蒙版和合成
    • 坐标系、转换和单位
    • 文档结构、元数据和扩展性功能
    • 渐变和图案
    • 交互性
    • 链接和视图
    • 绘制和颜色
    • 路径,包括path元素和d特性的完整功能
    • 文本

  • 其他平台版本管理功能

    • 固定网站
    • 新文档模式
    • 新用户代理 (UA) 字符串

  • 开发人员工具新增功能

    • 性能改进
    • “控制台”选项卡
    • “网络”选项卡
    • UA 切换程序工具
    • 实际性能衡量


通过标准支持实现互操作性改进

重要提示   Internet Explorer 9 中的新标准支持要求浏览器处于 Internet Explorer 9 标准模式(“IE9 模式”)。最佳实现方法是使用标准!DOCTYPE指令且没有
X-UA-Compatible meta标签或
HTTP 标头。调用 IE9 模式的!DOCTYPE如下所示:

当然,您可以使用!DOCTYPE
X-UA-Compatible meta 标签或 HTTP 标头来根据需要更改默认设置。
若要确定当前文档模式,请按 F12 打开 Internet Explorer 开发人员工具,然后查看菜单栏右侧。若要覆盖文档模式,请在“文档模式”菜单上单击“Internet Explorer 9 标准”。
有关
Internet Explorer 9 中文档模式行为的更新,请参阅本指南的平台版本管理一节。

级联样式表级别
3 (CSS3)


Internet Explorer 9 对级联样式表 (CSS) 提供比以前所有的 Microsoft 浏览器都要多的支持。除了保留在 Internet Explorer 8(在该版本中,Internet Explorer 完全符合 CSS2.1 规范)中完成的工作外,Internet Explorer 9 增加了对许多 CSS3 组件的支持。
注意  请务必记住,许多 CSS3 模块仍处于工作草案或最后讨论阶段。在这些模块达到候选建议阶段之前,可能会进行重大更改。有关详细信息,请参阅最新 CSS3 草案模块(英文)。

CSS3 2D 转换

Internet Explorer 9 添加了对CSS3
2D 转换的支持。通过 CSS 2D 转换,能够将由 CSS 呈现的元素转换为二维空间。
Internet Explorer 9 支持以下
2D 转换属性:


  • -ms-transform 属性对元素应用一个或多个二维转换函数。
  • -ms-transform-origin属性为元素建立转换的起点。此属性在您需要更改默认起点(中心)时有用。

注意   由于 CSS 2D 转换模块尚未从 W3C 接收到“备选推荐项”状态,使用transformtransform-origin属性时都必须带有-ms-前缀,以便可被 Internet Explorer 9 识别。有关特定于供应商的前缀的详细信息,请参阅“IE 团队博客”上的“ IE9、供应商前缀和开发人员”(英文)。
Internet Explorer 9 支持以下与
-ms-transform 属性一起使用时所需的转换函数:


  • matrix(a,b,c,d,e,f) 函数以六个值(af)的矩阵的形式指定 2D 转换。
  • translate(tx,[ty])函数指定按矢量 [tx,ty] 进行 2D 平移,其中tx是第一个平移值参数,ty是可选的第二平移值参数。如果不指定ty,则其值为零。(平移值参数可以是百分比或长度。)
  • translateX(tx)函数指定按x方向上的给定量进行平移。
  • translateY(ty)函数指定按y方向上的给定量进行平移。
  • scale(sx,[sy])函数指定按照由两个参数描述的 [sx,sy] 缩放矢量进行 2D 缩放运算。如果没有提供第二参数,则它会采用等于第一参数的值。
  • scaleX(sx)函数指定通过使用 [sx,1] 缩放矢量进行缩放运算,其中sx作为参数给出。
  • scaleY(sy)函数指定通过使用 [1,sy] 缩放矢量进行缩放运算,其中sy作为参数给出。
  • rotate(angle)函数指定按有关元素起点的参数中指定的角度进行 2D 旋转,如transform-origin属性所定义。
  • skewX(ax)函数指定按给定角度沿x轴进行扭曲转换。
  • skewY(ay)函数指定按给定角度沿y轴进行扭曲转换。
  • skew(ax,[ay])函数指定沿x轴和y轴进行扭曲转换。第一个角度参数指定x轴上的转换。第二个角度参数指定y轴上的转换。如果没有给出第二参数,则使用零作为角度y的值(即,在y轴上没有扭曲)。

-ms-transform-origin
属性接受一个或两个值。每个值都可以是关键字、长度或百分比。如果不设置-ms-transform-origin属性,则转换在中心开始(相当于 50% 50% 的-ms-transform-origin值)。


  • 第一个值表明水平位置(x轴上的位置),可以是负值。此值可以是长度值(采用任意受支持的长度单位)、百分比(相对于框的总长),或以下三个关键字之一:left(相当于 0% 或长度为零)、center(相当于 50% 或框长的一半),或 right(相当于 100% 或框的全长)。
  • 第二个值表明垂直位置(y轴上的位置),可以是负值。此值可以是长度值(采用任意受支持的长度单位)、百分比(相对于框的总高),或以下三个关键字之一:top(相当于 0% 或高度为零)、center(相当于 50% 或框高的一半),或 bottom(相当于 100% 或框的总高)。

如果只指定一个值,则假定第二个值为 center。
请注意以下标记。
div
{
     -ms-transform:translate(200px,
100px) scale(.75, .75) rotate(40deg);
     -ms-transform-origin:60% 100%;
}

Internet Explorer 9 中,如果将-ms-transform-origin属性设置为 60% 100%,则会将转换的起点设置为要转换的元素的长度的 60%,高度的 100%。-ms-transform属性先在x方向将元素移动 200 像素,在y方向移动 100 像素。然后它按 75% 缩放该元素。最后,它将该元素环绕-ms-transform-origin属性设置的起点旋转 40 度。
有关
CSS3 2D 转换的详细信息,请参阅MSDN。

CSS3 背景和边框模块

Internet Explorer 9 增加了对CSS3
背景和边框模块(英文)的几种功能的支持。最受关注的新功能border-radius属性也是最热门的 CSS 边框功能。Internet Explorer 9 还引入了对以下新 CSS3 属性的支持:


  • background-clip
  • background-origin
  • background-size
  • box-shadow

Internet Explorer 9 还向以下现有 CSS 背景和边框属性增加了功能:


  • background-color:支持CSS3 颜色。
  • background-image:支持多个值和 SVG 图像。
  • background-repeat:支持多个值,以及空间和圆角值。
  • background-attachment:支持多个值,以及local值。
  • background-position:支持多个值。
  • background:针对 CSS3 进行了更新
  • border-color:支持 CSS3 颜色。

border-radius属性
使用border-radius属性可以使边框角弯曲,方法实质上是将硬角“替换”为四分之一椭圆并指定每个椭圆的半径。这类属性包括:


  • border-radius(给定的值指定框的所有四个角的半径。)
  • border-bottom-left-radius
  • border-bottom-right-radius
  • border-top-left-radius
  • border-top-right-radius

例如,看看下面的标记:
border-radius:100px
66.66px 200px 50px;
border:
10px blue double;
padding: 24px;
width:400px;height:125px;
应用于文本块时,效果如下。
DSC0000.jpg

CSS3 颜色模块

Internet Explorer 9 增加了对
CSS3 颜色模块的支持。此模块提供对RGBA、HSL 和 HSLA颜色模型的支持;提供 opacity 属性;提供对currentColor关键字的支持。Internet Explorer 9 还扩展了对transparent关键字的支持。
RGBA
颜色模型
RGB 颜色模型进行了扩展,包括 alpha 通道(即透明度)。RGBA 值的格式是rgba(red,green,blue,alpha)redgreenblue分量与 RGB 颜色模型的对应分量相同,以整数或百分比的形式表示。alpha分量表示为 0.0(完全透明)至 1.0(完全不透明)之间的值。
例如,若要将背景颜色设置为具有 50% 透明度的红色,可以在样式表中包含以下两个 CSS 声明中的任意一个:
background-color:rgba(255,0,0,0.5);
background-color:rgba(100%,0%,0%,0.5);
请注意,尽管 RGB 值支持十六进制表示法,RGBA 值并不支持。
HSL
颜色模型
Internet Explorer 9 支持 CSS3 颜色模型的色调-饱和度-亮度 (HSL) 颜色值。在 HSL 颜色模型中,“色调”定义为指示颜色在颜色盘上的角度(例如,红色为 0 或 360,绿色为 120,蓝色为 240)。“饱和度”和“亮度”以百分比的形式表示。例如,下面的 CSS 声明定义红色背景。
background-color:hsl(0,100%,50%);
HSLA
颜色模型
Internet Explorer 9 还使用
alpha 通道扩展了 HSL 颜色模型。与 RGBA 模型一样,alpha 通道表示为 0.0 至 1.0 之间的值。例如,下面的 CSS 声明定义透明度为 50% 的红色背景。
background-color:hsla(0,100%,50%,0.5);
opacity属性
Internet Explorer 9 增加了
CSS3 颜色模块的 opacity 属性,使用该属性可以在元素级别控制透明度。与 RGBA 值的 alpha 分量类似,opacity值是 0.0(完全透明)至 1.0(完全不透明)范围之间的数字。opacity属性在所有元素上可用。
下面的示例演示颜色海军蓝的opacity属性,不透明值以 0.2 的增量从 0 递增到 1。

   
   
   
   
   
   

此示例对 25×125 像素的div生成下面的输出。
DSC0001.png
颜色关键字
CSS3 颜色模块定义了 CSS 颜色关键字列表,该列表与 SVG 1.0 的颜色关键字列表相同。尽管 SVG 支持是 Internet Explorer 9 中的新增功能,Internet Explorer 8 中已经实现了这一更改。
Internet Explorer 9 引入了
CSS3 颜色模块的currentColor关键字,该关键字指示所有接受color的属性的color 属性的当前值。当对color属性本身进行设置时,currentColor等效于color:inherit.
Internet Explorer 9 还将transparent关键字的使用扩展到border-color和background-color属性之外。该关键字现在可以用于所有接受color属性的属性。

CSS3 字体模块

每个新 CSS 版本都具备更好的排版控制功能。与此同时,缺乏可互操作的 Web 字体格式令人遗憾。Internet Explorer 9 增强了对 CSS 字体的现有支持,以符合CSS3
字体模块的要求。它还增加了对 Web 开放字体格式 (WOFF) 和原始 TrueType 字体的支持。
字体属性
font-weight属性获得了更新,以便 Internet Explorer 9 可以按照 CSS3 字体模块中的规定计算字体粗细。
font-size属性获得了更新,以便每个关键字的比例因子都遵循 CSS3 字体模块中的定义。此外,关键字和 HTML 标题大小现在按照 CSS3 字体模块中的规定进行映射。
font-stretch属性是 Internet Explorer 9 中的新增功能,用于从字体系列中选择正常、紧缩或扩展的字体。此属性也可用作@font-face规则描述符。
@font-face
规则
@font-face规则可实现字体链接。即,样式表可以引用特定字体文件,供浏览器下载和使用。例如,考虑下面的标记。
@font-face
{
   font-family:MyFont;
   src:url(http://mysite/fonts/MyFont.ttf)
      format("embedded-opentype");
}
p {font-family:MyFont, serif;
}
在此示例中,@font-face规则指示浏览器转到src描述符中指定的 URL,以下载包含指定字体的字体文件。在 Internet Explorer 8 及更早版本中,如果src描述符包含可选format字符串(如上例所示的字符串),则会错误地忽略该描述符。在 Internet Explorer 9 中,会正常分析src描述符。
Internet Explorer 9 还增加了对unicode-range描述符的支持,使用该描述符可以指定给定字体支持的 Unicode 字符的范围。例如,下面的代码示例指定基本 ASCII 字符的范围。
@font-face {
   font-family:MyFont;
   src:url(http://mysite/fonts/MyFont.ttf);
   unicode-range:U+0-7F;
}
Web
字体格式
Microsoft 开发的 Internet Explorer 9 可以提供尽量多的 Web 字体供您选择。为此,我们完成了以下工作:


  • 通过继续支持嵌入式OpenType (EOT)确保向后兼容
  • 增加了对
    Web 开放字体格式 (WOFF) 的支持,该格式通过使用 ZIP 压缩格式分别压缩每个表,重新打包基于 sfnt 的字体文件(TrueType、OpenType 和开放字体格式字体)
  • 增加了对可安装(未设置嵌入权限位)原始 TrueType 字体的支持

若要查看 Internet Explorer 9 中的 Web 字体的示例,请参阅Internet
Explorer Test Drive上的“ Web
字体”(英文)或“
更多 Web 字体”(英文)演示。
有关
Internet Explorer 9 中的 CSS3 字体的详细信息,请参阅MSDN。

CSS3 媒体查询模块

CSS3 媒体查询模块指定一些方法,供 Web 开发人员将样式表的范围限定为一组精确的设备功能。例如,对于在移动设备(具有非常小的屏幕、有限调色板、低分辨率等)、上网本(具有小屏幕、完整调色板、高分辨率等)和标准计算机(具有大屏幕、完整调色板、高分辨率等)上进行浏览的用户,您可能需要以不同方式为这些用户设计页面。CSS3 媒体查询支持的媒体属性的完整列表包括宽度、高度、设备宽度、设备高度、方向、纵横比、设备纵横比、颜色、颜色索引、单色和分辨率。
下面的声明是典型的媒体查询(使用 @media 规则)。
@media screen
and (max-width:400px) {div {border:none;}}
在本例中,screen指示目标媒体类型,max-width是目标媒体属性。该声明指示,仅当在宽度最多为 400 像素的屏幕上显示页面时,才应用指定规则(在div元素上无边框)。您可以组合使用媒体属性,以创建更为具体的查询,如下所示。
@media screen and (max-width:400px) and (max-height:600px) {…}
当媒体为宽度不超过 400 像素高度不超过 600 像素的屏幕时,此声明应用指定规则。
请在Internet
Explorer Test Drive(英文)网站查看提供的媒体查询。
Internet Explorer 9 在 CSS、HTML、XML 和 XHTML 中引入对媒体查询的支持。有关 Internet Explorer 9 中的媒体查询的详细信息,请参阅MSDN。

CSS3 命名空间模块

Internet Explorer 9 支持大部分CSS3
命名空间模块。开发人员使用 CSS 命名空间可以为 CSS 文件声明默认命名空间。也就是说,默认情况下,任何元素或特性选择器也使用该命名空间。
开发人员使用 CSS 命名空间还可以创建命名空间前缀,这些前缀以后可在 CSS 文件中使用。在 Internet Explorer 9 中,您还可以进一步声明针对 SVG 元素的命名空间。
@namespace
at
规则
@namespace
at 规则声明一个 XML 命名空间(而且可以选择声明其前缀),并将该命名空间与表示命名空间名称的字符串相关联。例如,下面的规则声明一个默认命名空间。
@namespace
"http://www.w3.org/1999/xhtml";
该默认命名空间应用于没有显式命名空间组成部分的名称。
如果@namespace规则声明为具有某个前缀,则可以在命名空间限定的名称中使用该前缀。例如,为命名空间prfx提供下面的命名空间声明
@namespace prfx "http://prfx.contoso.com";
…下面的选择器与prfx前缀引用的命名空间中的E元素匹配。
prfx|E
下面的示例稍微复杂一些。
@namespace prfx
"http://prfx.contoso.com";
@namespace msft "http://msft.example.com";
p {background-color:red;}
prfx|p {background-color:blue;}
msft|p {background-color:green;}
在此示例中,创建了两个命名空间前缀。首先,将任何命名空间中的p元素都着色为红色。然后,将prfx命名空间中的所有p元素都重新着色为蓝色,将msft命名空间中的p元素重新着色为绿色。
下面的示例设置 SVG 元素的样式。
@namespace svg
"http://www.w3.org/2000/svg";
svg|circle {fill:red;}
通过使用此示例中的命名空间和声明,使用 SVG 创建的所有圆都会填充为红色。
有关详细信息,请参阅 MSDN 上的@namespace(英文)规则参考页。

CSS3 值和单位模块

Internet Explorer 9 增加了对CSS3
值和单位模块中介绍的许多新值和单位的支持。这些新值和单位中的大多数对于支持本文档中介绍的其他 CSS3 功能是必需的。
Internet Explorer 9 增加了对以下新值和单位的支持:


  • deg:度(角度单位)
  • grad:梯度(角度单位)
  • rad:弧度(角度单位)
  • turn:转(角度单位)
  • ms:毫秒(时间单位)
  • s:秒(时间单位)
  • rem:根元素的字体大小(相对长度单位)
  • vw:视区宽度(相对长度单位)
  • vh:视区高度(相对长度单位)
  • vm:视区宽度或高度的较小值(相对长度单位)
  • ch:零宽度(呈现字体中零字形的宽度;相对长度单位)

此外,Internet Explorer 9 更新了用于生成的内容的attr()函数。该函数现在可以应用于任何属性,可接受多个参数。
下面的 CSS3 函数是 Internet Explorer 9 中新增的:


  • calc():使用算术运算符计算值,只要长度值是允许值就可使用

有关
CSS 函数的详细信息,请参阅 MSDN 上的CSS
值和单位参考(英文)。

CSS3 选择器

Internet Explorer 9 支持对CSS3 选择器提案建议中指定的
CSS 选择器语法进行补充。此处列出的是 Internet Explorer 9 中新增的选择器。(有关 Internet Explorer 中的选择器支持的完整详细信息,请参阅 MSDN 上的CSS
兼容性和
Internet Explorer(英文)。)
有关详细信息,请参阅 MSDN 上的CSS 选择器(英文)参考部分。
若要查看提供的 CSS3 选择器示例,请转到Internet
Explorer Test Drive(英文)网站。
结构伪类
通过结构伪类,可以基于文档树中无法使用简单选择器或连结符选择的额外信息进行选择。
下面的代码选择作为文档根的E元素。
E:root
下面的代码选择作为其父级的第n个子级的E元素。
E:nth-child(n)
下面的代码选择作为其父级的第n个子级(从最后一个开始计数)的E元素。
E:nth-last-child(n)
下面的代码选择作为其类型的第n个同级的E元素。
E:nth-of-type(n)
下面的代码选择作为其类型的第n个同级(从最后一个开始计数)的E元素。
E:nth-last-of-type(n)
下面的代码选择作为其父级的最后一个子级的E元素。
E:last-child
下面的代码选择作为其类型的第一个同级的E元素。
E:first-of-type
下面的代码选择作为其类型的最后一个同级的E元素。
E:last-of-type
下面的代码选择作为其父级的唯一子级的E元素。
E:only-child
下面的代码选择作为其类型的唯一同级的E元素。
E:only-of-type
下面的代码选择没有子级(包括文本节点)的E元素。
E:empty
目标伪类
目标伪类选择引用 URI 的目标元素。段标识符用于标识页面中的位置,使用数字符号以及随后的锚点标识符组成,例如 http://www.example.com/mypage.html#section_3。
下面的代码选择类importantdiv元素,该元素是引用 URI 的目标元素。如果文档的 URI 没有段标识符,则不存在目标元素。
div.important:target
UI
元素状态伪类
UI 元素状态伪类用于选择处于特定状态(已启用、已禁用或已选择(选中))的 UI 元素(窗体控件,如单选按钮或复选框)。
下面的代码选择已启用的E窗体控件元素。
E:enabled
下面的代码选择已禁用的E窗体控件元素。
E:disabled
下面的代码选择已选择的E窗体控件元素。
E:checked
:indeterminate伪类选择无法确定其切换状态(既不是已选中(已选择),也不是未选中(未选择))的单选按钮和复选框。下面的代码选择无法确定其状态的E窗体控件元素。
E:indeterminate
注意   当前 CSS3 规范中不再定义:indeterminate伪类,但是许多常用浏览器仍支持该伪类。
求反伪类
求反伪类采用简单选择器作为参数,选择被该参数选择的元素。下面的代码选择与简单选择器s不匹配的E元素:
E:not(s)
UI
元素段伪元素
UI 元素段伪元素::selection用于选择用户突出显示的任何页面部分,包括可编辑文本字段中的文本。此伪元素可以应用于color和background-color属性。下面的代码选择E元素中的任何用户选定文本。
E::selection
注意   当前 CSS3 规范中不再定义::selection伪元素,但是许多常用浏览器仍支持该伪元素。

其他 CSS 功能

Internet Explorer 9 实现了对
CSS 对象模型 (OM) 视图模块工作草案的一些支持。

CSSOM 视图模块

CSSOM 视图模块定义了一些
API,Web
开发人员使用这些 API 可以进行检查,也可以以编程方式更改文档及其内容的视觉属性,包括布局框定位、视区宽度和元素滚动。Internet Explorer 8 对此模块的一部分提供支持。Internet Explorer 9 扩展了对更多 CSSOM 视图 API 的支持:


  • ClientRect
    ( TextRectangle)
    接口

    • width属性
    • height属性

  • Range接口的增加

    • getBoundingClientRect方法
    • getClientRects方法

  • Screen接口

    • pixelDepth属性

  • Screenview接口

    • innerWidth属性
    • innerHeight属性
    • pageXOffset属性
    • pageYOffset属性
    • screenX属性
    • screenY属性
    • outerWidth属性
    • outerHeight属性


数据 URI

数据 URI可用于在网页的上下文中直接嵌入数据。最常见的示例是在网页中嵌入的微小图像,如下所示:
data:image/gif;base64,R0lGODdhMAAwAPAAAAAAAP
当放置在img元素的src特性中时,此文本可有效地将图像嵌入在页面的标记中。Internet Explorer 8 将数据 URI 引入到 Internet Explorer 中。
凭借
Internet Explorer 9,开发人员现在可以在script元素的src特性中使用数据 URI。此外,数据 URI 的大小限制从 Internet Explorer 8 中的 32 KB 提高到 Internet Explorer 9 中的 4 GB。

文档对象模型
(DOM) 改进


Internet Explorer 9 采用显著改进的文档对象模型 (DOM)。除了扩展对万维网联合会 (W3C) DOM 级别 2 (L2) 和 L3 的支持之外,Internet Explorer 9 还采用增强的 DOM 以及改进的空白处理。

引入增强的
DOM


Internet Explorer 9 中的增强型
DOM 加快了新 JavaScript 引擎“Chakra”与 Trident 布局引擎之间的脚本执行层速度,并将 DOM 的入口点转移到 Chakra 引擎中,从而改进了 Internet Explorer 9 标准模式(IE9 模式)的整体性能。有关 IE9 模式的详细信息,请参阅本文档中的通过标准支持实现互操作性改进。增强型
DOM 同时还可按照 W3C DOM L2 和 L3 规范中的规定,实现正确的 DOM 继承对象层次结构。

Internet Explorer 9 标准模式运行页面时,F12 开发人员工具中现在可以反映增强型 DOM 对象类型。(有关 Internet Explorer 9 中的新 F12 开发人员工具的详细信息,请参阅本文档中的F12 开发人员工具。)IE9 模式页面不会显示旧式的基于 COM 的类型(由各种接口和显示对象组成),而是报告由 Chakra 引擎使用的实际增强型 DOM 对象类型名称,这符合 W3C DOM L2 和 L3 标准(例如NodeListDocumentTypeHTMLBodyElement等)。
Internet Explorer 9 中的增强型
DOM 显著改进了 Internet Explorer 9 与其他浏览器之间的互操作性状态。同时还可提高很多方案的性能,这主要得益于表示为本机 JavaScript 对象的 DOM 对象。
增强型 DOM 将新 JavaScript 引擎“Chakra”提供的各种新功能扩展到 DOM 提供的对象和 API 中,包括:


  • 选择性
    DOM 对象扩展性(通过Object.preventExtensions)
  • DOM API 可变性(通过更改 DOM API 的属性描述符或完全删除属性)
  • DOM 对象的 JSON 支持
  • 通过继承实现本机 JavaScript 对象功能(hasOwnPropertytoString等)
  • 通过继承实现本机 JavaScript 函数功能(callapplybind

这些功能统一了 JavaScript 引擎的本机对象与 DOM 之间的编程体验。此外还新增加了以下 DOM 功能:


  • W3C DOM 异常:DOM 异常是由于 DOM API 故障而引发的新类型错误对象。这些异常的错误代码会映射到异常本身上定义的常量。
  • W3C DOM“常量”属性(例如,Node.ELEMENT_NODE):常量属性是简单字段,用于为许多其他 DOM API 的数字返回值提供名称。例如,可以将nodeType
    DOM API 返回的数字与常量进行比较,用于创建可读性更高的代码:if (myElement.nodeType == Node.ELEMENT_NODE)


XML 与 DOM 之间进行分析和序列化


尽管
Internet Explorer 已支持在 XML 与本机 DOM 之间进行分析和序列化,脚本仍然无法方便地从 HTML 文档内部访问此功能。因此,Internet Explorer 9 增加了对DOMParser和XMLSerializer接口的支持。这些接口受到其他常用浏览器的广泛支持。
下面的脚本示例演示如何使用DOMParser接口将字符串分析为 XML 文档:
var
parser = new DOMParser();
var doc = parser.parseFromString("Some XML",
"text/xml");
下面的脚本示例演示使用XMLSerializer接口,将 DOM 节点(包括 HTML 文档中的节点)序列化为 XML 字符串:
var
serializer = new XMLSerializer();
var xmlString = serializer.serializeToString(doc);

文档对象模型
(DOM) 级别
2 和 3


Internet Explorer 9 增加了对文档对象模型级别 2 (DOM L2) 和级别 3 (DOM L3) 的支持,并在 Internet Explorer 中现有实现的基础上改进了 DOM L2 支持。还增加了对WebIDL
工作草案规范(英文)的支持。
Internet Explorer 9 引入了对以下 DOM 功能的支持。

DOM 核心(L2

L3)和视图
(L2)


Internet Explorer 9 增加了对许多新DOM
L2 核心
API 的支持,包括:


  • documentType
  • ProcessingInstruction
  • createDocument

还增加了对 DOM 命名空间的可互操作支持,如对*NS方法和命名空间相关属性(createElementNSnamespaceURIlocalNameprefix等等)的支持。Internet Explorer 9 还支持许多最常用的DOM
L3 核心方法和属性:


  • adoptNode
  • compareDocumentPosition
  • CDATASection
  • importNode
  • inputEncoding
  • isDefaultNamespace
  • isEqualNode
  • isSameNode
  • isSupported
  • lookupNamespaceURI
  • lookupPrefix
  • replaceWholeText
  • textContent
  • xmlEncoding
  • xmlStandalone
  • xmlVersion
  • wholeText

Internet Explorer 9 完全支持DOM
L2 视图属性。
有关详细信息,请参阅 MSDN 上的DOM
核心和视图(英文)参考部分。

DOM 元素遍历

元素遍历(英文)规范定义了ElementTraversal接口。利用该接口,可以通过脚本对 DOM 树中的元素(如 HTML、XML 或 SVG 文档中的元素节点)进行导航。Internet Explorer 9 引入了对ElementTraversal接口及其五个属性的支持。

DOM L2 和 L3 事件

DOM 事件规范描述 DOM 事件系统(可用于实现事件处理程序的注册),描述文档树中的事件流,并定义事件的上下文信息。有关事件模型的详细信息,请参阅 MSDN 上的了解事件模型(英文)。
Internet Explorer 9 中事件系统的一个主要目标是符合 W3C 指定的可互操作系统的要求。这样,您不必再使用 Internet Explorer 专有的attachEvent模型,从而无需针对不同浏览器分别编写代码。


  • DOM L2和L3事件

    • 事件注册和调度 API(addEventListenerremoveEventListenercreateEventdispatchEvent
    • 事件捕获、冒泡和目标阶段
    • 新事件对象(KeyboardEvent、MouseEvent、MutationEvent等);CustomEvent(用于特定于应用程序的事件);以及来自其他标准的事件类型的事件对象接口(如DragEvent)
    • 新的基于标准的事件类型(复合事件、文本事件、轮子事件、DOM 变异事件,等等),来自 HTML5


注意   包含 DOM 变异事件是考虑到完整性,但在 W3C 标准中将其弃用。

DOM L2 HTML

Internet Explorer 9 增加了对DOM
L2 HTML API(在以前版本的 Internet Explorer 中不可用)的支持,包括 HTML5 API(如getElementsByClassNamecharacterSet)。Internet Explorer 9 改进了表中的对象模型,特别是在用于添加或删除元素的 DOM 操作方面。
getElementsByClassName
getElementsByClassName方法返回具有与输入字符串匹配的类特性的所有元素节点。其功能与getElementsByTagName方法的功能类似。
characterSet
characterSet特性返回当前文档的字符编码的首选 MIME 名称。

DOM L2 样式

DOM L2 样式规范定义了一些 API,用于通过删除或修改规则,以编程方式访问和更改各个元素和整个样式表的样式。以前版本的 Internet Explorer 能够使用专有方法完成这些任务;Internet Explorer 9 增加了对 DOM L2 样式规范中定义的标准化 API 的支持。此外,还增加了对标准化 API(在 Internet Explorer 中没有等效项,如getComputedStyle方法)的支持。请参阅Internet
Explorer Test Drive(英文)网站提供的getComputedStyle方法示例。
有关详细信息,请参阅 MSDN 上的DOM
样式(英文)。

DOM L2 遍历和范围

DOM L2 遍历和范围(英文)规范的 DOM 范围部分定义在一对边界点之间选择文档内容的一般方法。边界点是通过容器(包含该点的父元素)和偏移量(该点在容器中所处的位置)指定的。结合 HTML5 Selection接口,通过 DOM 范围功能可实现诸如以编程方式检索范围、选择子级和删除选择等功能。
Internet Explorer 9 支持所有
DOM L2 范围
API,以及所有 HTML5 选择 API(如已经广泛使用的setSelectionRange方法)。
有关详细信息,请参阅 MSDN 上的DOM
范围(英文)。
DOM L2 遍历和范围(英文)规范的 DOM 遍历部分定义了在文档中移动和根据需要筛选节点的方法。Internet Explorer 9 支持 W3C 规范中定义的两种 DOM 遍历方法(NodeIteratorTreeWalker)以及两种节点筛选方法(whatToShowNodeFilter)。
有关详细信息,请参阅 MSDN 上的DOM
遍历(英文)。

DOM 空白处理

对于在 DOM 中公开空白,Internet Explorer 中的处理方式与其他浏览器中的处理方式不同;这一领域中缺乏互操作性使 Web 开发人员倍感不便。在以前版本中,Internet Explorer 会折叠所遇到的空白,不会将其放置到 DOM 中的文本节点中。在 Internet Explorer 9 中,会按预期方式保留空白并将其放置到 DOM 中的文本节点中。此行为与其他主要浏览器一致。

ECMAScript 5

除了改进 JavaScript 性能,Internet Explorer 9 还对 JavaScript 语言功能进行了增强。2009 年 12 月,ECMA 批准ECMA-262
第五版(英文)作为第三版的后继版本(未发布过第四版),同一年,在将 JavaScript 对象的本机 JSON 支持添加到 Internet Explorer 8(英文),并将DOM
对象的访问器支持添加到
Internet Explorer 8(英文)时,Microsoft 首次提供支持 ECMAScript 5 (ES5) 的元素。不过除了 JSON 和 DOM 访问器支持之外,ES5 还标准化了对 JavaScript 语言进行的许多重大增强功能。
Internet Explorer 9 中实现了许多重要的 ECMAScript 5 功能,包括:


  • 新数组方法:every、filter、forEach、indexOf、isArray、lastIndexOf、map、reduce、reduceRight、some
  • 增强的对象模型和对象函数:Object.create、Object.defineProperties、Object.defineProperty、Object.freeze、Object.getOwnPropertyDescriptor、Object.getOwnPropertyNames、Object.getPrototypeOf、Object.isExtensible、Object.isFrozen、Object.isSealed、Object.keys、Object.preventExtensions、Object.seal
  • 其他计算方法和函数:Date.now、针对 ISO 日期格式的 Date.parse 支持、Date.toISOString、函数绑定、字符串裁剪

Internet Explorer 9 还更正了以前的 Internet Explorer 中的 JavaScript 实现中存在的几个问题。有关详细信息,请参阅Internet Explorer 团队博客(英文)。若要查看提供的 ECMAScript 5 支持,请转到Internet
Explorer Test Drive(英文)网站。

HTML5

Internet Explorer 8 引入了对HTML5
工作草案规范(英文)的某些功能的支持,包括:


  • DOM 存储,它定义为 HTML5 Web 存储规范(英文)的一部分。
  • Ajax 导航,通过window.location.hash属性和onhashchange事件(都在 HTML5 规范的历史记录遍历部分中定义)实现。
  • 跨文档消息传送,通过postMessage方法和onmessage事件(都作为 HTML5 Web 消息传送模块的一部分指定)实现。

Internet Explorer 9 以 Internet Explorer 8 已完成的
HTML5 合规性方面的工作为基础,实现了以下新功能:


  • HTML5 地理位置 API
  • 新的video和audio
    HTML 元素
  • 新的canvas
    HTML 元素
  • Selection接口
  • 更多可互操作的 HTML 分析
  • 几个新
    DOM API(本文档的DOM L2 HTML一节中进行了讨论)
  • 缩放向量图形 (SVG)

注意  请务必记住,截止到撰写本文时为止,HTML5 规范仍然处于工作草案阶段。在该规范达到候选建议阶段之前,可能会进行重大更改。有关详细信息,请参阅最新 HTML5 工作草案(英文)。

HTML5 地理位置

Internet Explorer 9 增加了对地理位置的支持。地理位置 API 能让 Web 应用程序访问运行 Internet Explorer 的 PC 的当前地理位置。然后,网页可以根据位置来定制用户体验,例如,显示在地图上的位置或者显示最新当地信息(如天气或新闻报道)。位置数据是根据纬度和经度坐标返回的。Internet Explorer 9 中的地理位置 API 符合地理位置 API 规范(英文)中设定的标准。
要观看地理位置的实际演示,请参阅Internet
Explorer 9 Test Drive 网站。
有关地理位置的详细信息,请参阅MSDN。

HTML5 video 和
audio 元素


至于
Internet Explorer 9 中现在支持的最令人期待的 HTML5 功能,其中两个是新的video和audio元素。videoaudio元素都在
HTML5 规范的嵌入式内容(英文)部分中定义。
实际上,通过videoaudio元素,可以将视频和音频内容嵌入到 HTML 页面中。Web 开发人员还可以为这两个元素指定几个特性。例如,考虑下面的标记。

    This content appears if the video
tag or the codec is not supported.


Internet Explorer 9 中,此标记将在加载视频内容时,在 400×300(widthheight特性)的空间中显示图像文件“frame.png”(poster特性)。视频文件"video.mp4"(src特性)将在加载页面后自动开始播放(autoplay特性),并且显示用于控制视频的控件(controls特性)。视频播放完毕时,将重复播放(loop特性)。如果视频格式不受支持,则改为显示video元素中的文本(“This content appears…”)video元素还支持preload元素,后者可提示浏览器:Web 开发人员认为如何可以实现最佳用户体验。
若要查看提供的video元素示例,请参阅 Internet Explorer Test Drive 网站上的“ 视频全景”演示。
Internet Explorer 9 还支持多个源的video元素,其中每个源都由子元素source指定。例如,考虑下面的标记。

   
   

在这里,Internet Explorer 9 选择列出的第一种受支持格式(本例中为第二个source元素)并播放其关联的源文件。
audio元素的定义方式与video元素的定义方式类似,但是没有widthheightposter特性。若要查看提供的audio元素示例,请转到Internet
Explorer Test Drive(英文)网站。
Internet Explorer 9 支持以下内容格式:


元素名称


支持的格式


视频


MP4 容器、H.264 视频、所有配置文件 — AAC 或 MP3 格式的音频
WebM 视频(如果您安装了 VP8 编码解码器)


audio


AAC 或 MP3


有关详细信息,请参阅 MSDN 上的HTML5
视频和音频(英文)。

HTML5 canvas 元素

Internet Explorer 9 中新增的另一个令人期待的 HTML5 功能是canvas元素,该元素可与 Canvas 2D API 结合使用。按照HTML5规范中的定义,使用canvas元素可以在依赖于分辨率的位图画布上呈现图形。若要在画布上绘制,可使用“上下文”,如 W3C Canvas
2D API 规范中指定的 Canvas 2D 上下文。Internet Explorer 9 通过将 2D Canvas 绘制 API 用作其上下文,引入了对canvas元素的支持。(在 Internet Explorer 9 中,Canvas 2D 上下文由CanvasRenderingContext2D对象或ICanvasRenderingContext2D接口表示。)与 Internet Explorer 9 中的所有图形一样,canvas是使用
Windows 和
GPU 进行加速的硬件。
使用画布可以实现各种绘制方案,包括矩形、路径、直线、填充、弧形以及贝塞尔曲线和二次曲线。此外,Internet Explorer 9 中的canvas元素还支持width和height特性。(width和
height 的默认值分别是 300 和 150 像素,默认颜色是透明黑色。)
画布是一种对 Web 上的图形进行编程的方式。canvas标签是一种“即时模式”(绘制命令直接发送给图形硬件)的二维绘制图面,可用于提供实时图形、动画或交互式游戏,无需下载单独的插件。根据CanvasRenderingContext2D对象定义的 API,使用画布可以实现以下绘制方案:


  • 矩形
  • 直线
  • 填充
  • 弧形
  • 阴影
  • 贝塞尔曲线
  • 二次曲线
  • 图像
  • 视频

您可以使用 JavaScript 创建动态画布绘制,或实现可对键盘输入、鼠标单击或任何其他浏览器事件进行响应的交互体验。例如,Internet Explorer Test Drive 网站上的示例(英文)仅使用几行 JavaScript,就实现了随机放置、着色的发光直线。
Internet Explorer 9 中的 canvas 元素支持 width 和 height 特性。(width 和 height 的默认值分别是 300 和 150 像素,默认颜色是透明黑色。)
Internet Explorer 9 支持以下
Canvas 2D 上下文 API(由CanvasRenderingContext2D对象公开的成员):


  • canvas属性(反向引用canvas对象)
  • 状态方法(save、restore)
  • 转换方法(scale、rotate、translate、transform、setTransform)
  • 合成属性(globalAlpha、globalCompositeOperation)
  • 颜色和样式属性(strokeStyle、fillStyle)
  • CanvasGradient对象和方法(addColorStop、createLinearGradient、createRadialGradient)
  • CanvasPattern对象和方法 ( createPattern)
  • 直线特性(lineWidth、lineCap、lineJoin、miterLimit)
  • 阴影特性(shadowColor、shadowOffsetX、shadowOffsetY、shadowBlur)
  • 矩形方法(clearRect、fillRect、strokeRect)
  • 复杂形状方法(beginPath、moveTo、closePath、lineTo、quadraticCurveTo、bezierCurveTo、arcTo、arc、rect、fill、stroke、clip、isPointInPath)
  • TextMetrics接口(CanvasTextMetrics对象)、其属性 ( width)
    以及文本方法和特性(font、textAlign、textBaseline、fillText、strokeText、measureText)
  • 图像方法
    ( drawImage)
  • ImageData接口(CanvasImageData对象)、其属性(data、height和width)以及像素操作方法(createImageData、getImageData、putImageData)
  • CanvasPixelArray对象及其属性length

有关对 Internet Explorer 9 中的 HTML5 Canvas 的更加深入介绍,请参阅MSDN。此外,还可以访问Internet
Explorer Test Drive(英文)网站,查看canvas元素的更多演示。有关 Internet Explorer 9 中的canvas元素的技术信息,请参阅 MSDN 上的canvas(英文)元素参考页。

HTML 分析改进

Internet Explorer 9 中的 HTML 分析进行了改进,更加符合 HTML5 草案规范中规定的行为。
分析 HTML 中的 SVG
Internet Explorer 9 支持直接嵌入 HTML 中的 SVG。有关 SVG 的详细信息,请参阅本指南中的可缩放的向量图形 (SVG)。
分析 XHTML
Internet Explorer 9 将 MIME 类型为application/xhtml+xml的文档分析为 XHTML。
一般元素
以前,Internet Explorer 会将自己无法识别的元素分析为“未知”元素。这些元素将扁平化,因而无法应用常规 CSS 样式规则,并且不符合 HTML5 草案规范。Internet Explorer 9 改变了这一行为,现在,会将无法识别的元素分析为“泛型”元素,因而这些元素可以像常规元素一样工作。这样,开发人员无需再提供解决方法(如调用document.createElement强制 Internet Explorer 识别元素)。
下面是泛型元素的简单示例(本例中是名为mydiv的未定义元素)。

mydiv {
     color:blue;
     font-weight:bold;
}

...
I am using a generic element in this
sentence.
Internet Explorer 8 会忽略mydiv标签及其关联 CSS 规则。此语句的呈现效果如下。
DSC0002.png
Internet Explorer 9 会正常分析mydiv标签,呈现效果如下。
DSC0003.png
重叠标签
如果 HTML 包含重叠标签,则在分析时,Internet Explorer 8 及更早版本不会解析这些标签。这一行为不符合 HTML5 草案规范的规定。如果为了编写脚本而使一些元素重叠(如此处举例说明的元素),则可能导致令人困惑的脚本错误。Internet Explorer 9 遵循 HTML5 草案规范,在分析时会解析重叠标签。
下面是一个简单的脚本示例,将重叠的i标签与b标签之间的文本转变为红色。

function load()
{
     var elms =
document.getElementsByTagName("i");
     for(var i = 0; i < elms.length; i++)
     {
          var elm = elms;
           if(elm.parentNode.tagName.toLowerCase()
== "b")
elm.style.color = "red";
     }
}
   
...

You should be aware of how this
affects script.


Internet Explorer 8 及更早版本中,此标记会生成意外的呈现效果。
DSC0004.png

Internet Explorer 9 中,此标记会正常呈现。
DSC0005.png
script style 块的分析更改
Internet Explorer 8 及更早版本不会将script或style块中的文本保存到 DOM 中的文本节点。Internet Explorer 9 以正常方式将scriptstyle块中的文本作为文本节点保存到 DOM 中。这样,源代码在 DOM 中作为文本节点,便于您通过脚本进行操作。

HTML5 选择
API


Internet Explorer 9 增加了对三个 HTML5 文本选择 API 的支持。Selection对象表示Range对象的列表,这些对象是通过 Internet Explorer 9 中新增的DOM
L2 范围(英文)支持实现的。有关详细信息,请参阅本文档前面的文档对象模型 (DOM) 改进。
getSelection方法
getSelection方法返回窗口的Selection对象,该对象表示当前所选文本。
selectionStart属性
selectionStart属性获取相对于当前所选文本开始位置的偏移量,还可以设置所选内容的开始位置。
selectionEnd属性
selectionEnd属性获取相对于当前所选文本介绍位置的偏移量,还可以设置所选内容的结束位置。

HTML5 语义元素

Internet Explorer 9 改进了对若干种 HTML5 语义元素的支持。此处所指的“语义”元素定义为这样一种元素:其标记描述其内容,但它没有任何特殊行为。语义标记对于可访问性尤其有用。
Internet Explorer 9 对其语义元素支持进行了以下更改:


  • 现在,按
    HTML5 规范中的规定,元素从HTMLElement接口而不是从HTMLUnknownElement接口继承。
  • 在默认情况下,元素现在按 HTML5 规范中的规定设置样式。

现在识别以下语义元素:


  • section
  • nav
  • article
  • aside
  • hgroup
  • header
  • footer
  • figure
  • figcaption
  • mark

ICC 颜色配置文件

国际颜色协会 (ICC) 发布颜色配置文件,用于描述软件和硬件的颜色特性。
Internet Explorer 9 按照ICC 规范(英文)中的规定,为图像引入了对 ICC v2 和 v4 颜色配置文件的支持。

选择器 API 级别 2

选择器
API 级别
2(英文)规范定义了一组应用程序编程接口 (API),可用于评估文档对象模型 (DOM) 中的选择器。
Internet Explorer 8 实现了选择器 API querySelector和querySelectorAll。Internet Explorer 9 增加了对msMatchesSelector方法的支持。

可缩放的向量图形
(SVG)


对可缩放的向量图形 (SVG) 的支持已成为 Internet Explorer 要实现的最热门的功能之一,同时也是一种功能强大的方式,用于向网站添加可轻松缩放的高保真视觉效果(从小而简单到大而复杂),而无需插件或单独的查看器。

Internet Explorer 9 中,Microsoft 很自豪地引入了对基本 SVG 功能集的支持。Internet Explorer 9 中的 SVG 支持基于SVG
1.1(第二版)规范建议(针对桌面浏览器)。已经实现了以下功能:


  • 大部分
    SVG 文档结构、交互性(脚本事件)和样式(内联和通过 CSS)
  • 许多表示元素及其相应的特性和 DOM 接口,包括:

    • 基本形状
    • 填充、笔划、标记和颜色
    • 渐变和图案
    • 路径
    • 文本


Internet Explorer 9 支持用于显示 SVG 标记的以下方法:


  • HTML5 嵌入中的 SVG 段,无需使用外部对象(即只需在 HTML 中包含  标签)
  • 作为完整文档类型的 SVG(具有 .svg 文件扩展名)
  • XML 或 XHTML 中的 SVG(类似于 HTML5 方法,仅限 XML 或 XHTML 文件)
  • 作为 CSS 图像的
    SVG
  • 使用object元素的 SVG,如下所示(请注意typeheightwidth特性):





  • 使用imgembediframeframe元素的 SVG,如下所示:


有关
Internet Explorer 9 中的 SVG 支持的详细信息,请参阅MSDN。
有关
SVG 的详细信息,请参阅 MSDN 上的svg(英文)元素参考页。

基本形状

Internet Explorer 9 按照 SVG 1.1(第二版)规范的基本形状模块(英文)的规定,引入了对所有基本形状元素、其特性以及关联 DOM 接口的分析和呈现的支持。Internet Explorer 9 支持的基本形状集由以下形状元素组成:


  • rect
  • circle
  • ellipse
  • line
  • polyline
  • polygon

Internet Explorer 9 还支持这些元素的关联 DOM 接口。
下面是上述每个形状元素的示例。标记之后是 Internet Explorer 9 中相应结果的屏幕截图。
矩形:rect 元素





DSC0006.png

DSC0007.png
有关详细信息,请参阅 MSDN 上的rect(英文)元素参考页。
圆形:circle 元素

DSC0008.png
有关详细信息,请参阅 MSDN 上的circle(英文)元素参考页。
椭圆:ellipse 元素

DSC0009.png
有关详细信息,请参阅 MSDN 上的ellipse(英文)元素参考页。
直线:line 元素






DSC00010.png
有关详细信息,请参阅 MSDN 上的line(英文)元素参考页。
折线:polyline 元素
“折线”在
SVG 中定义为连接的多条直线,通常构成“开放”形状、少一条或多条边的多边形或非凸形状。

DSC00011.png
有关详细信息,请参阅 MSDN 上的polyline(英文)元素参考页。
多边形:polygon 元素
多边形是一个闭合形状。

DSC00012.png
有关详细信息,请参阅 MSDN 上的polygon元素参考页。

剪辑、蒙版和合成

Internet Explorer 9 按照 SVG 1.1(第二版)规范的剪辑、蒙版和合成模块(英文)的规定,支持 SVG 剪辑、剪辑路径、蒙版和不透明度。(本文档路径部分中讨论
SVG 路径。)
剪辑
剪辑路径剪切或“剪辑”可以绘制颜色、图案或图像的区域。图形元素处于剪辑路径之外的所有部分都不会绘制。剪辑路径是完全不透明的;图形元素处于剪辑路径之外的部分是完全不可见的。

SVG 中,overflowclip属性确定初始剪辑路径或确定用于显示内容的形状。默认情况下,初始剪辑路径定义为 SVG 视区或页面中将显示 SVG 内容的矩形区域。
clipPath元素定义剪辑路径。然后,可使用clip-path属性引用该剪辑路径。clip-rule属性应用于clipPath元素中的图形元素,clipPathUnits特性为clipPath的内容定义坐标系。剪辑路径可应用于文本、颜色、图案和图像。
通过SVGClipPathElement DOM 接口,可以以编程方式访问剪辑功能。
下面是 SVG 剪辑路径的一个简单示例。




   



此示例使用clipPath元素在圆形中定义一个剪辑路径。然后,使用clip-path属性将该剪辑路径应用于一个矩形。这会在 Internet Explorer 9 中产生以下效果。
DSC00013.png
蒙版
蒙版类似于剪辑路径,不过它是半透明的。蒙版通常用于将前景对象合成到当前背景中。
mask元素用于定义蒙版。然后可使用mask属性引用该蒙版。
下面是 SVG 蒙版的一个简单示例。



  Example mask01 - three different colored circles used to
mask the color of a rectangle
  
  
     
            



      
      
        
            
        
  
     

此示例使用mask属性在颜色不同的三个相邻圆形中定义一个蒙版。然后使用mask属性将该蒙版应用于一个紫色矩形。这会在 Internet Explorer 9 中产生以下效果。
DSC00014.png

坐标系、转换和单位

Internet Explorer 9 按照 SVG 1.1(第二版)草案规范的坐标系、转换和单位模块(英文)的规定,引入了对 SVG 坐标系、转换和单位的支持。Internet Explorer 9 支持的功能包括:


  • 单位和百分比。
  • 任何元素的任意转换以及transform特性。
  • viewBoxpreserveAspectRatio属性(包括与overflow属性的交互)。
  • 对转换和转换列表类型的支持。

Internet Explorer 9 还支持与
SVG 坐标系和转换关联的 DOM 接口。

文档结构

Internet Explorer 9 按照 SVG 1.1(第二版)规范的文档结构、元数据和可扩展性模块的规定,引入了对基本 SVG 文档结构、元数据和可扩展性功能的支持。Internet Explorer 9 支持的元素包括:


  • svg
  • desc
  • title
  • metadata
  • g
  • use
  • defs
  • symbol
  • image
  • switch

Internet Explorer 9 还支持这些元素的关联 DOM 接口。

渐变和图案

使用
SVG,可以通过颜色、渐变或图案绘制或勾画形状和文本。Internet Explorer 9 按照 SVG 1.1(第二版)规范的渐变和图案模块的规定,支持 SVG 渐变和图案。
渐变
渐变支持是通过渐变元素(linearGradient和radialGradient)和特性(gradientUnitsgradientTransform)提供的。渐变颜色由stop元素定义。渐变元素可用于 SVG 形状的fillstroke属性。例如,考虑以下标记:

  
      
        
        
      
  
   

此标记定义了一个具有线性渐变的矩形。两个stop元素指定颜色转变在矢量方向上的颜色停止点,在 10% 位置处为黄色停止点,在 90% 位置处为蓝色停止点。Internet Explorer 9 中的显示效果如下:
DSC00015.png
图案
图案支持是通过pattern元素及其特性提供的。像渐变一样,图案元素也可用于 SVG 形状的fillstroke属性。例如,考虑以下标记。

  
   
      
      
   
  
  

在此示例中,pattern元素定义了一个由蓝色小正方形和很小的黄色圆形交替组成的图案。然后用该图案填充指定的椭圆形。下面的图像是 Internet Explorer 9 中的显示效果。
DSC00016.png

交互性

SVG 内容可以是交互式的,即它可以更改,以响应用户输入。Internet Explorer 9 按照 SVG 1.1 规范(第二版)的交互性模块(英文)的规定,支持 SVG 交互功能,包括:


  • 鼠标事件:

    • mousedown
    • mouseup
    • click
    • mouseover
    • mousemove
    • mouseout

  • 光标/指针事件:

    • focusin
    • focusout
    • activate


Internet Explorer 9 还支持交互性模块的SVGCursorElement DOM 接口。
此外,Internet Explorer 9 还按照SVG
Tiny 1.2(英文)规范的交互性模块中的规定,支持focusable属性。
以下标记是提供的一个非常简单的 SVG 交互性示例。

运维网声明 1、欢迎大家加入本站运维交流群:群②:261659950 群⑤:202807635 群⑦870801961 群⑧679858003
2、本站所有主题由该帖子作者发表,该帖子作者与运维网享有帖子相关版权
3、所有作品的著作权均归原作者享有,请您和我们一样尊重他人的著作权等合法权益。如果您对作品感到满意,请购买正版
4、禁止制作、复制、发布和传播具有反动、淫秽、色情、暴力、凶杀等内容的信息,一经发现立即删除。若您因此触犯法律,一切后果自负,我们对此不承担任何责任
5、所有资源均系网友上传或者通过网络收集,我们仅提供一个展示、介绍、观摩学习的平台,我们不对其内容的准确性、可靠性、正当性、安全性、合法性等负责,亦不承担任何法律责任
6、所有作品仅供您个人学习、研究或欣赏,不得用于商业或者其他用途,否则,一切后果均由您自己承担,我们对此不承担任何法律责任
7、如涉及侵犯版权等问题,请您及时通知我们,我们将立即采取措施予以解决
8、联系人Email:admin@iyunv.com 网址:www.yunweiku.com

所有资源均系网友上传或者通过网络收集,我们仅提供一个展示、介绍、观摩学习的平台,我们不对其承担任何法律责任,如涉及侵犯版权等问题,请您及时通知我们,我们将立即处理,联系人Email:kefu@iyunv.com,QQ:1061981298 本贴地址:https://www.yunweiku.com/thread-67532-1-1.html 上篇帖子: 为你的文件夹穿上美丽外衣——Win7文件夹背景图片设置 下篇帖子: 2012.04.03 WIN7:'telnet' 不是内部或外部命令,也不是可运行的程序或批处理文件。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

扫码加入运维网微信交流群X

扫码加入运维网微信交流群

扫描二维码加入运维网微信交流群,最新一手资源尽在官方微信交流群!快快加入我们吧...

扫描微信二维码查看详情

客服E-mail:kefu@iyunv.com 客服QQ:1061981298


QQ群⑦:运维网交流群⑦ QQ群⑧:运维网交流群⑧ k8s群:运维网kubernetes交流群


提醒:禁止发布任何违反国家法律、法规的言论与图片等内容;本站内容均来自个人观点与网络等信息,非本站认同之观点.


本站大部分资源是网友从网上搜集分享而来,其版权均归原作者及其网站所有,我们尊重他人的合法权益,如有内容侵犯您的合法权益,请及时与我们联系进行核实删除!



合作伙伴: 青云cloud

快速回复 返回顶部 返回列表