深层次分析IE适配方式难题

2021-03-12 07:06 jianzhan
英文原文:http://msdn.microsoft.com/en-us/library/cc288325(VS.85).aspx
文档适配性用于界定让IE怎样编译程序你的网页页面。此文档解释文档适配性,怎样特定你网站的文档适配性方式和怎样分辨1个网页页面该应用的文档方式。
序言
以便协助保证你的网页页面在全部将来的IE版本号都有1致的外型,IE8引进了文档适配性。在IE6中引进1个增设的适配性方式,文档适配性使你可以在IE展现你的网页页面时挑选特殊编译程序方式。
新的IE以便保证网页页面在将来的版本号中都有1支的外型,IE8引进了文档适配性。当你引进1个增设的适配性方式,
此文章内容表明文档适配性的必要性,列出現有版本号IE能应用的文档适配性方式并示范性怎样挑选特殊的适配性方式。
掌握文档适配性的必要性

每一个关键版本号IE新增的作用全是以便让访问器更非常容易应用、提升安全性性及更适用业界规范。以这些做为IE的特点,在其中1个风险性便是旧版本号网站没法正确的显示信息。

以便将这个风险性降到最低,IE6容许网页页面开发设计人员挑选IE编译程序和显示信息她们网页页面的方法。"Quirks mode"为预设,这会使网页页面以旧版本号访问器的视点显示信息,"Standards mode"(也称为"strict mode")特性是适用业界规范最为健全。但是要运用这个提高的适用作用,网页页面务必包括适当的<!DOCTYPE>命令。

若1个网页页面沒有包括<!DOCTYPE>命令,IE6会将它以quirks mode显示信息。若网页页面包括合理的<!DOCTYPE>命令但访问器没法辨识,IE6会将它以IE6 standards mode显示信息。由于极少数网站早已包括<!DOCTYPE>命令,适配性方式的切换非常取得成功。这使网页页面开发设计人员能挑选将她们的网页页面迁移为standards mode的最好机会。

随著時间历经,更多网站刚开始应用standards mode。它们也刚开始应用IE6的特点和作用来检验IE。举例来讲,IE6不适用universal selector(即css之全局性挑选器 * {}),1些网站便应用它来对于IE做特殊的对应。

当 IE7提升了对全域挑选器的适用,那些依靠IE6特性的网站便没法侦测出这个新版本号的访问器。因而那些对于IE的特殊对应没法运用于IE7,导致这些网站便没法如她们预期的显示信息。因为<!DOCTYPE>只适用两种适配性方式,遭受危害的网站有着者迫不得已升级她们的网站使其能适用IE7。

IE8 比以前的任何版本号访问器都更适用业界规范,因而对于旧版本号访问器设计方案的网页页面将会没法如预期般展现。以便协助减轻全部难题,IE8引进文档适配性的定义,使你能挑选你的网页页面设计方案要对应的特殊IE版本号。文档适配性在IE8提升了1些新的方式,这些方式能告知访问器怎样分析和编译程序1个网页页面。若你的网页页面没法在 ie8正确的显示信息,你能够升级你的网站使它适用全新的网页页面规范(优先选择选项)或在你的网页页面上新增1个meta元素用于告知IE8怎样按照旧版本号访问器编译程序你的网页页面。

这能让你挑选将你的网站升级适用IE8新特性的机会。


了解文档适配性方式

IE8适用几种文档适配性方式,它们具备不一样的特点并危害內容显示信息的方法。

•Emulate IE8 mode标示IE应用<!DOCTYPE>命令来决策怎样编译程序內容。Standards mode命令会显示信息成IE8 Standards mode而quirks mode会显示信息成IE5 mode。不一样于IE8 mode,Emulate IE8 mode高度重视<!DOCTYPE>命令。
•Emulate IE7 mode标示IE应用<!DOCTYPE>命令来决策怎样编译程序內容。Standards mode命令会显示信息成IE7 Standards mode而quirks mode会显示信息成IE5 mode。不一样于IE7 mode,Emulate IE7 mode高度重视<!DOCTYPE>命令。针对很多网页页面来讲这是最强烈推荐的适配性方式。
•IE5 mode 编译程序內容好似IE7的quirks mode之显示信息情况,和IE5中显示信息的十分相近。
•IE7 mode编译程序內容好似IE7的standards mode之显示信息情况,不管网页页面是不是含有<!DOCTYPE>命令。
•IE8 mode出示对业界规范的最高适用,包括 W3C Cascading Style Sheets Level 2.1 Specification和W3C Selectors API,并比较有限的适用 W3C Cascading Style Sheets Level 3 Specification (Working Draft)。
•Edge mode标示IE以现阶段能用的最高方式显示信息內容。当应用IE8时其等同于于IE8 mode。若(假设)将来放出适用更高适配性方式的IE,应用Edge mode的网页页面会应用该版本号能适用的最高方式来显示信息內容。一样的那些网页页面在应用IE8访问时仍会仍旧显示信息。

因为edge mode应用该IE版本号所能适用的最高方式来显示信息所访问的网页页面內容,提议仅应用于检测页及别的非商用网页页面。


特定文档适配性方式
要为你的网页页面特定文档方式,必须在你的网页页面中应用meta元素放入X-UA-Compatible http-equiv 标头。下列是特定为Emulate IE7 mode 适配性之案例。

拷贝编码
编码以下:

<html>
<head>
<!-- Mimic Internet Explorer 7 -->
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<title>My Web Page</title>
</head>
<body>
<p>Content goes here.</p>
</body>
</html>

其內容随著特定的网页页面方式而变更,当要仿真模拟IE7时,特定IE=EmulateIE7,特定IE=5, IE=7, 或IE=8来挑选在其中1种适配性方式。你还可以特定IE=edge来标示IE8应用它适用的最高方式。

X-UA-compatible标头沒有尺寸写之分。但是除title元素及别的的meta元素以外,它务必出現在网页页面header节其它元素以前的部位,


设置网站服务器以特定预设适配性方式

网站后台管理员可籍着为网站界定1个自订标头来为她们的网站预设1个特殊的文档适配性方式。这个特殊的方式取决于你的网站服务器。举例来讲,以下的 web.config文档使Microsoft Internet Information Services (IIS)能界定1个自订标头以全自动应用IE7 mode来编译程序全部网页页面。


拷贝编码
编码以下:

<?xml version="1.0" encoding="utf⑻"?>
<configuration>
<system.webServer>
<httpProtocol>
<customHeaders>
<clear />
<add name="X-UA-Compatible" value="IE=EmulateIE7" />
</customHeaders>
</httpProtocol>
</system.webServer>
</configuration>

若你已于网站服务器特定了1个预设的文档适配性方式,你能够在某些网页页面上特定不一样的文档适配性方式来盖过它。在网页页面中特定的方式优先选择权高于服务器中所特定的方式。

请查阅你的网站服务器有关特定自订标头的资讯,或看更多材料:

Implementing the META Switch on Apache
Implementing the META Switch on IIS


判断文档适配性方式

要判断网页页面应用IE8访问时的文档适配性方式,应用document object(文本文档目标)的documentMode作用。比如在IE8的网站地址列键入以下程式码会显示信息现阶段网页页面的文档方式。

javascript:alert(document.documentMode);

documentMode作用会回传1个标值对应现阶段网页页面的文档适配性方式,举例来讲,若网页页面特定为适用IE8方式,documentMode便会回传值"8"。

在IE6引进的compatMode作用不适用在IE8引进的documentMode作用。现阶段应用compatMode创建的运用程式还能在IE8中功效,但它们务必升级为应用documentMode。

若你期待应用JavaScript判断1个文档的适配性方式,引进下面案例的这段程式码可适用旧版本号的IE。



拷贝编码
编码以下:

engine = null;
if (window.navigator.appName == "Microsoft Internet Explorer")
{
// This is an IE browser. What mode is the engine in?
if (document.documentMode) // IE8
engine = document.documentMode;
else // IE 5⑺
{
engine = 5; // Assume quirks mode unless proven otherwise
if (document.compatMode)
{
if (document.compatMode == "CSS1Compat")
engine = 7; // standards mode
}
}
// the engine variable now contains the document compatibility mode.
}


了解內容特性值

內容特性值在接受到异于先前描述的标值时是具备延展性的。这能使你针对IE怎样显示信息你的网页页面更有操纵性。举例来讲,你能够设置內容特性值为IE=7.5。当你这样做的情况下,IE尝试将这个值变换为version vector并挑选最贴近的結果。在这个事例中,IE会将其设置为IE7 mode。下面的案例显示信息该方式设置为别的值的情况。



拷贝编码
编码以下:

<meta http-equiv="X-UA-Compatible" content="IE=4"> <!-- IE5 mode -->
<meta http-equiv="X-UA-Compatible" content="IE=7.5"> <!-- IE7 mode -->
<meta http-equiv="X-UA-Compatible" content="IE=100"> <!-- IE8 mode -->
<meta http-equiv="X-UA-Compatible" content="IE=a"> <!-- IE5 mode -->

<!-- This header mimics Internet Explorer 7 and uses
<!DOCTYPE> to determine how to display the Web page -->
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
留意: 前面的案例显示信息独立的內容值。具体上IE只会实行网页页面中第1个X-UA-Compatible标头。

你还可以应用內容特性来特定复数的文档适配性方式,这能协助保证你的网页页面在将来的访问器版本号都能1致的显示信息。欲设置复数的文档方式,请设置內容特性以辨别你想应用的方式。应用分号来分开各个方式。

假如1个特殊版本号的IE适用所规定的适配性方式多于1种,将採用列于标头內容特性中最高的能用方式。你可使用这个特点来清除特殊的适配性方式,尽管其实不强烈推荐这样做。举例来讲,以下标头即会清除IE7 mode。

<meta http-equiv="X-UA-Compatible" content="IE=5; IE=8" />

结果

适配性针对网页页面设计方案师来讲是是非非常关键的顾忌。尽管最好是是能够创建1个彻底不需依靠任何网页页面访问器特点或作用的网站,有时这是不能能完成的。文档适配性方式便能将网页页面限定在某个特殊版本号的IE中。

应用X-UA-Compatible标头来特定你的网页页面适用的IE版本号。应用document.documentMode判断网页页面的适配性方式。

挑选适用某个特殊版本号的IE,你能够保证你的网页页面在将来的访问器版本号中也能有显示信息的1致