Internet Explorer 8 :HTML 和 CSS 支持

来源:互联网 时间:1970-01-01

Windows Internet Explorer 8 是迄今最符合标准的版本,它完全支持级联样式表 (CSS) 级别 2.1,并加强了对 CSS 3、HTML 4.01 的支持,也能很好地支持 HTML 5。由于改进了对这些 HTML 元素的支持,Web 开发人员现在可以构建更具表现力和可访问的 HTML 标记。本文档将探讨对 Windows Internet Explorer 8 中关于 HTML 和 CSS 支持行为的更改,以及这些更改如何影响 Web 开发人员。

HTML 支持

为了帮助开发人员充分利用 HTML 4.01 提供的元素和更好地解释 Web 开发人员期望表达的语意含义,Windows Internet Explorer 升级了对下列表示性元素的支持:

P 元素:表示逻辑段落。

OBJECT 元素:可以表示任何对象,包括图像。

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>

在本示例中,第二个 P 元素缺少结束标记。当使用 Windows Internet Explorer 7 查看时,TABLE 元素作为第二个 P 元素的子元素显示。第二个 P 元素从窗口的左边距缩进 30 像素。由于 TABLE 是该 P 元素的子元素,它也从该窗口的左边距缩进。但是,当使用 Windows Internet Explorer 8 的默认模式查看时,TABLE 元素与左边距对齐。由于 Windows Internet Explorer 8 在显示 TABLE 元素前自动添加了该 P 元素所缺少的结束标记,因此 TABLE 元素是该元素的子元素。

使用 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 元素定义一个对象回退策略。它首先尝试加载 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 的每个新版本都会增强对 CSS 标准的支持,至今已完全支持 CSS 2.1。下表显示了 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 中部分实现此功能。有关详细信息,请单击链接查看 MSDN 上该功能的参考页。

伪类

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 否 是


相关阅读:
Top