2009年3月20日，微软向全球发布了Windows Internet Explorer 8(IE8)正式版，成为人们关注的焦点。IE8迄今最符合标准的版本，它完全支持级联样式表 (CSS) 级别 2.1，并加强了对 CSS 3、HTML 4.01 的支持，也能很好地支持 HTML 5。由于改进了对这些 HTML 元素的支持，Web 开发人员现在可以构建更具表现力和可访问的 HTML 标记。本文将探讨对IE8中关于 HTML 和 CSS 支持行为的更改，以及这些更改如何影响 Web 开发人员。
HTML改进
为了帮助开发人员充分利用 HTML 4.01 提供的元素和更好地解释 Web 开发人员期望表达的语意含义，Windows Internet Explorer 升级了对下列表示性元素的支持：
P 元素：表示逻辑段落。
OBJECT 元素：可以表示任何对象，包括图像。
button元素提交其 value 属性，而非 innerHTML，这意味着现在可以使用跨浏览器 FORM 方案的 button 元素。
getElementByIdNAME方法现在区分大小写，不再使用属性进行不适当的搜索。
setAttribute 方法现在不区分大小写，这意味着指定属性时不必再使用“驼峰式”大小写格式（如“camelCaseWord”）。它也可以正确标识 HTML 属性，如 CLASS 和 FOR。
P自动添加元素结束标记
当后面跟随 TABLE、FORM、NOFRAMES 或 NOSCRIPT 元素时，缺少结束标记的 P 元素会立即自动添加结束标记。
- <html>
- <head>
- <title>简单的 P 元素结束示例</title>
- <meta http-equiv="X-UA-Compatible" content="IE8"/>
- </head>
- <body>
- <p>这是第一段</p>
- <p style="margin-left:30px">这是第二段。<!-- P not closed -->
- <table border="1px" cellpadding="2px"><tr><td>这是一个表格单元格。</td></tr></table>
- <p>这是第三段。</p>
- </body>
- </html>
<html> <head> <title>简单的 P 元素结束示例</title> <meta http-equiv="X-UA-Compatible" content="IE8"/> </head> <body> <p>这是第一段</p> <p style="margin-left:30px">这是第二段。<!-- P not closed --> <table border="1px" cellpadding="2px"><tr><td>这是一个表格单元格。</td></tr></table> <p>这是第三段。</p> </body> </html>
在本示例中，第二个 P 元素缺少结束标记。当使用 Windows Internet Explorer 7 查看时，TABLE 元素作为第二个 P 元素的子元素显示。第二个 P 元素从窗口的左边距缩进 30 像素。由于 TABLE 是该 P 元素的子元素，它也从该窗口的左边距缩进。但是，当使用 Windows Internet Explorer 8 的默认模式查看时，TABLE 元素与左边距对齐。由于 Windows Internet Explorer 8 在显示 TABLE 元素前自动添加了该 P 元素所缺少的结束标记，因此在IE8里TABLE 元素不是第二个P元素的子元素。
使用 OBJECT 元素显示图像
Windows Internet Explorer 8 可以使用 OBJECT 元素显示图像。在旧版本的浏览器中使用此元素显示图像时，它常常自动将滚动条和边框添加到图像中，从而往往导致图像显示不正确。
在 Windows Internet Explorer 8 中，OBJECT 元素显示图像时就像这些图像是使用 IMG 元素嵌入的一样。要在网页中使用此行为，请将 OBJECT 元素的 DATA 属性设置为图像的 URL。您也可以在 DATA 属性中嵌入 dataURL。
要使 Windows Internet Explorer 将图像加载到使用旧版本行为的 OBJECT 元素中，请对网页选择旧兼容性模式或将 OBJECT 元素的 TYPE 属性设置为 text/html。
改进的回退对象
当 OBJECT 元素加载资源失败时，将改为呈现 OBJECT 元素内部的内容。这称为对象回退，因为它允许您定义 Windows Internet Explorer 在遇到问题进行“回退”时所用的策略。
Windows Internet Explorer 7 引入了此功能以嵌套 OBJECT 元素；即使用多个 OBJECT 元素创建更丰富的回退策略，如以下示例中所示：
- <object data="..." type="silverlight" >
- <object data="..." type="windows media file">
- <object data="..." type="image/png">
- -_-!!!
- </object>
- </object>
- <object>
<object data="..." type="silverlight" > <object data="..." type="windows media file"> <object data="..." type="image/png"> -_-!!! </object> </object> <object>
此示例使用三个 OBJECT 元素定义一个对象回退策略。它首先尝试加载 Silverlight 应用程序。如果此操作失败，则要求使用Microsoft Windows Media 文件。如果无法加载 Windows Media 文件，则此示例加载一个图像。
如果您使用 Windows Internet Explorer 7 查看此示例，将会看到此图像，但是页面的文档对象模型 (DOM) 中只有一个 OBJECT 元素，因为 Windows Internet Explorer 7 不会为加载失败的对象创建 OBJECT 元素。
如果您使用 Windows Internet Explorer 8 查看此示例，将会看到页面的 DOM 中有包含三个 OBJECT 元素的图像。由于加载失败，前两个 OBJECT 元素处于非活动状态。不过，您可以使用 JavaScript 搜索这些元素。
注意：如果不刷新页面或使用 JavaScript 加载新对象，则无法重新激活处于非活动状态的对象。
Windows Internet Explorer 8 仅将这一新的回退行为用于与通信相关的错误，即只在加载请求生成客户端 HTTP 错误响应 (4xx) 或服务器 HTTP 错误响应 (5xx) 时发生。如果由于其他原因（如内容格式不正确或 ActiveX 控件损坏）导致请求失败，将发生原始回退行为。
HTML 5/AJAX 增强功能
Windows Internet Explorer 8 的 HTML 5 增强功能包括 AJAX 导航、DOM 存储、跨文档消息传送 (XDM) 和连接事件。它们是严格按照 W3C HTML 5.0 草案开发的。
- AJAX 导航
使用 AJAX 的显著好处之一是无需使用传统的页面导航即可更新页面内容。在某些情况下，使用 AJAX 无法保存页面状态，亦无法通知其组件，对此可能会令人疑惑，这是因为地址栏、“后退”和“前进”按钮等组件只能在页面导航后进行更新。因此，浏览器无法在旅行日志上保存 AJAX 内容更改或更新地址栏等组件。这可能使最终用户产生迷惑，不知道为什么浏览器总是显示旧内容。在 IE8 模式中，Windows Internet Explorer 像处理导航一样处理 window.location.hash 更新，并保存早期文档 URL。 - DOM 存储
现在，网页使用 document.cookie 属性将数据存储在本地计算机上。Cookie 能力有限，因为站点对每个域只能存储 50 个键/值对。此外，Cookie 编程模型很繁琐，需要分析数据的整个 Cookie 字符串。W3C 的 HTML 5 DOM 存储对象为键/值对字符串数据提供了一个更简单的全局和会话存储模型。站点可以在选项卡生命周期内存储数据或直到网站或用户清除数据。
每个域，包括其子域，有 10 MB 的本地存储空间。这有助于降低跨域攻击的可能性。同样，每个浏览器选项卡也有自己的会话存储。DOM 存储只是 Web 应用程序简化存储数据的一种机制 — 不使用后台数据库。例如，无法执行复杂的查询，如根据值搜索。 - 跨文档消息传送 (XDM)
浏览器的站点源策略阻止网页从其他域获得数据。这意味着单个网页上的不同域不能相互通信，从而无法提供更加丰富的体验。网站通过创建嵌套的 IFrame 并检索通过 URL 传送的数据绕过此策略。网站绕过此策略的另一种方法是直接托管脚本和其他域中的其他资源文件。第二种解决方法只允许单向通信。由于嵌入的脚本和资源使用与托管网站相同的权限运行，还可以访问用户的数据（如用户存储在 Cookie 中的数据），因此这种方法也存在安全风险。
XDM 提供的 postMessage 方法不显示在窗口对象中，这就允许不同的域根据给定的相互许可相互通信。XDM 为双向跨域通信提供了一种机制，比上述解决方法更简单、更能体现性能驱动。 - 连接事件
Windows Internet Explorer 8 允许网页通过 window.navigator.onLine 属性和联机/脱机事件检测浏览器何时联机或脱机。利用这些信息，您就可以使用 DOM 存储对象启用大量的脱机方案。例如，如果用户在登录到自己的 Live mail 页后失去了连接，页面会一直提示用户将草稿保存在 DOM 存储中并允许用户继续编辑电子邮件。恢复连接时，脚本会检索电子邮件并将其发送到服务器。
CSS改进
Windows Internet Explorer 8 是迄今为止 CSS 符合性最高的版本，它完全支持级联样式表 (CSS) 级别 2.1，并加强了对 CSS 3支持。下面是最为突出的几个亮点：
数据统一资源标识符 (URI)(最长32768个字符)
此机制允许网页作者直接在 URI 中嵌入小型实体，而不是使用 URI 标识检索实体的位置。此操作主要适用于在 CSS 或布局中使用的小图像（如项目符号）。
- 新伪类
以下是 Windows Internet Explorer 8 新增的内容：
:before 和 :after 伪元素允许作者指定与元素的文档树内容有关的动态内容的位置。
:focus 指的是用户何时激活元素以使它可以执行任务。此伪类适用于元素具有输入焦点的情况。
Outline 可以突出显示元素，但不会影响其大小。它是 outline-color、outline-style 和 outline-width 的简化属性。 - 打印
为了简化打印，已添加了下列属性：
page-break-inside
widows
orphans - 表格布局
多年来，表格始终是 Internet 上的首选布局机制。在 Windows Internet Explorer 8 中，现在可以使用 display 属性将表格类型格式应用于非表格元素。实际上，CSS 表格比 HTML 标记更灵活；使用 CSS 规则创建的表格嵌套元素后即有效，而使用 HTML 创建的表格会关闭容器以避免意外嵌套。
下表收集了 Windows Internet Explorer 8 中支持的各种改进的 CSS 属性，并与 Windows Internet Explorer 7 进行了比较，内容一目了然。这些表未详尽列出 Windows Internet Explorer 8 支持的所有 CSS 属性；只显示了 Windows Internet Explorer 7 不支持或部分支持，而现在 Windows Internet Explorer 8 支持的 CSS 属性。
单元格中的“部分”值表示只能在该版本的 Windows Internet Explorer 中部分实现此功能。
伪类
| CSS 2.1 |
|
IE 7.0 |
IE 8.0 |
| active { sRules } : |
:active |
部分 |
是 |
| after { sRules } : |
:after |
否 |
是 |
| before { sRules } : |
:before |
否 |
是 |
| focus { sRules } : |
:focus |
否 |
是 |
| lang(C) { sRules } : |
lang(): |
否 |
是 |
列表
| CSS 2.1 |
|
IE 7.0 |
IE 8.0 |
| { list-style-type :sStyle } |
list-style-type |
部分 |
是 |
颜色和背景
| CSS 2.1 |
|
IE 7.0 |
IE 8.0 |
| { background-position :sPosition } |
background-position |
部分 |
是 |
字体和文本
| CSS 2.1 |
|
IE 7.0 |
IE 8.0 |
| { font-weight :sWeight } |
font-weight |
部分 |
是 |
| { white-space :sWrap } |
white-space |
部分 |
是 |
| { word-spacing :sSpacing } |
word-spacing |
部分 |
是 |
生成的内容
| CSS 2.1 |
|
IE 7.0 |
IE 8.0 |
| { content :sContent } |
content |
否 |
是 |
| { counter-increment :sCounter } |
counter-increment |
否 |
是 |
| { counter-reset :sCounter } |
counter-reset |
否 |
是 |
| { quotes :sQuotes } |
quotes |
否 |
是 |
边框和布局
| CSS 2.1 |
|
IE 7.0 |
IE 8.0 |
| { border-collapse :sCollapse } |
border-collapse |
部分 |
是 |
| { border-spacing :sSpacing } |
border-spacing |
否 |
是 |
| { border-style :sStyle } |
border-style |
部分 |
是 |
| { caption-side :sLocation } |
caption-side |
否 |
是 |
| { empty-cells :sEmptyCells } |
empty-cells |
部分 |
是 |
定位
| CSS 2.1 |
|
IE 7.0 |
IE 8.0 |
| { bottom :sBottom } |
bottom |
部分 |
是 |
| { display :sDisplay } |
display |
部分 |
是 |
| { left :sPosition } |
left |
部分 |
是 |
| { right :sPosition } |
right |
部分 |
是 |
| { top :sTop } |
top |
部分 |
是 |
| { z-index :vOrder } |
z-index |
部分 |
是 |
打印
| CSS 2.1 |
|
IE 7.0 |
IE 8.0 |
| { orphans :nLines } |
orphans |
否 |
是 |
| { page-break-inside :sBreak } |
page-break-inside |
否 |
是 |
| { widows :nLines } |
widows |
否 |
是 |
用户界面
| CSS 2.1 |
|
IE 7.0 |
IE 8.0 |
| { outline :sOutline } |
outline |
否 |
是 |
| { outline-color :sColor } |
outline-color |
否 |
是 |
| { outline-style :sStyle } |
outline-style |
否 |
是 |
| { outline-width :sWidth } |
outline-width |
否 |
是 |
| CSS 3 |
|
IE 7.0 |
IE 8.0 |
| { box-sizing :sSizing } |
box-sizing |
否 |
是 |
函数
| CSS 2.1 |
IE 7.0 |
IE 8.0 |
| counter() |
否 |
是 |
| attr() |
否 |
是 |
关键字
| CSS 2.1 |
IE 7.0 |
IE 8.0 |
| Inherit |
否 |
是 |
文本兼容性模式
Windows Internet Explorer 8 精心构建了一种新的布局引擎，该引擎提供全面的 CSS 2.1 支持和强大的 HTML 5 支持以及文档对象模型 (DOM) 的互操作性修补程序。默认情况下，将启用标准支持的最高级别。网站作者可以使用以下 META 标记在 Windows Internet Explorer 8 中选择 EmulationIE7 模式呈现：
<meta http-equiv=”X-UA-Compatible” content=”IE=EmulateIE7″ />
开发工具
Windows Internet Explorer 8 中增强的开发工具可提供网页的内部元素，有助于研究和解决 HTML、CSS 和脚本方面的问题。包含下列工具：
CSS 工具，用于显示您的网页加载的样式表所定义的各种规则。
脚本调试，一种内置轻型调试器，让您无需退出 Windows Internet Explorer 即可设置断点并查看客户端脚本。
版本模式切换，允许您切换到其他浏览器模式以测试内容是否符合标准符合性。
探查器，一种内置工具，用于显示浏览器在哪个执行阶段花费了大量时间，以便网页作者重点进行优化。
IE 8开发工具的界面如图所示，有关开发工具详细信息，请参阅下列网站：
http://www.cnblogs.com/JustinYoung/
参考文档
IE8 White Paper(白皮书)
下载页面:
http://code.msdn.microsoft.com/Release/ProjectReleases.aspx?ProjectName=ie8whitepapers&ReleaseId=567
IE8博客:
http://blogs.msdn.com/ie/
