`

强制将IE8设置为IE7兼容模式来解析网页

阅读更多

英文原文:http://msdn.microsoft.com/en-us/library/cc288325(VS.85).aspx

文件兼容性用于定义让IE如何编译你的网页。此文件解释文件兼容性,如何指定你网站的文件兼容性模式以及如何判断一个网页该使用的文件模式。


前言

为了帮助确保你的网页在所有未来的IE版本都有一致的外观,IE8引入了文件兼容性。在IE6中引入一个增设的兼容性模式,文件兼容性使你能够在IE呈现你的网页时选择特定编译模式。
新的IE为了确保网页在未来的版本中都有一支的外观,IE8引入了文件兼容性。当你引入一个增设的兼容性模式,
此文章说明文件兼容性的必要性,列出现有版本IE能使用的文件兼容性模式并示范如何选择特定的兼容性模式。


了解文件兼容性的必要性

每个主要版本IE新增的功能都是为了让浏览器更容易使用、增加安全性及更支持业界标准。以这些作为IE的特色,其中一个风险就是旧版本网站无法正确的显示。

为了将这个风险降到最低,IE6允许网页开发人员选择IE编译和显示他们网页的方式。"Quirks mode"为预设,这会使页面以旧版本浏览器的视点显示,"Standards mode"(也称为"strict mode")特点是支持业界标准最为完善。然而要利用这个增强的支持功能,网页必须包含恰当的<!DOCTYPE> 指令。

若一个网页没有包含<!DOCTYPE> 指令,IE6会将它以quirks mode显示。若网页包含有效的<!DOCTYPE> 指令但浏览器无法辨识,IE6会将它以IE6 standards mode显示。因为少数网站已经包含<!DOCTYPE> 指令,兼容性模式的切换相当成功。这使网页开发人员能选择将他们的网页转移为standards mode的最佳时机。

随著时间经过,更多网站开始使用standards mode。它们也开始使用IE6的特性和功能来检测IE。举例来说,IE6不支持universal selector (即css之全局选择器 * {}),一些网站便使用它来针对IE做特定的对应。

当 IE7增加了对全域选择器的支持,那些依赖IE6特点的网站便无法侦测出这个新版本的浏览器。因此那些针对IE的特定对应无法应用于IE7,造成这些网站便无法如他们预期的显示。由于<!DOCTYPE> 只支持两种兼容性模式,受到影响的网站拥有者被迫更新他们的网站使其能支持IE7。

IE8 比之前的任何版本浏览器都更支持业界标准,因此针对旧版本浏览器设计的网页可能无法如预期般呈现。为了帮助减轻所有问题,IE8引入文件兼容性的概念,使你能选择你的网页设计要对应的特定IE版本。文件兼容性在IE8增加了一些新的模式,这些模式能告诉浏览器如何解析和编译一个网页。若你的网页无法在 ie8正确的显示,你可以更新你的网站使它支持最新的网页标准(优先选项)或在你的页面上新增一个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 SpecificationW3C 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<wbr><a href="http://msdn.microsoft.com/en-us/library/ms533876%28VS.85%29.aspx">http-equiv</a><wbr>标头。以下是指定为Emulate IE7 mode 兼容性之范例。</wbr></wbr>

<wbr></wbr>

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


其内容随著指定的页面模式而更改,当要模拟IE7时,指定IE=EmulateIE7 ,指定IE=5 , IE=7 , 或IE=8 来选择其中一种兼容性模式。你也可以指定IE=edge 来指示IE8使用它支持的最高模式。

X-UA-compatible标头没有大小写之分。然而除了title 元素及其他的meta 元素之外,它必须出现在网页header节 其它元素之前的位置,


设定网站服务器以指定预设兼容性模式

网站管理员可籍着为网站定义一个自订标头来为他们的网站预设一个特定的文件兼容性模式。这个特定的方法取决于你的网站服务器。举例来说,下列的 web.config文件使Microsoft Internet Information Services (IIS)能定义一个自订标头以自动使用IE7 mode来编译所有网页。

<wbr></wbr>

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


若你已于网站服务器指定了一个预设的文件兼容性模式,你可以在个别页面上指定不同的文件兼容性模式来盖过它。在网页中指定的模式优先权高于服务器中所指定的模式。

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

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


判定文件兼容性模式

要判定网页使用IE8浏览时的文件兼容性模式,使用document object(文档对象)的documentMode 功能。例如在IE8的网址列输入下列程式码会显示目前页面的文件模式。

javascript:alert(document.documentMode);

<wbr></wbr>

documentMode 功能会回传一个数值对应目前页面的文件兼容性模式,举例来说,若网页指定为支持IE8模式,documentMode 便会回传值"8 "。

在IE6引入的compatMode 功能不支持在IE8引入的documentMode 功能。目前使用compatMode 建立的应用程式还能在IE8中作用,但它们必须更新为使用documentMode。

若你希望使用JavaScript判定一个文件的兼容性模式,引入下面范例的这段程式码可支持旧版本的IE。

<wbr></wbr>

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

<wbr></wbr>

<wbr></wbr>

认识内容属性值

内容属性值在接收到异于先前叙述的数值时是具有弹性的。这能使你对于IE如何显示你的网页更有操控性。举例来说,你可以设定内容属性值为IE=7.5。当你这样做的时候,IE尝试将这个值转换为version vector 并选择最接近的结果。在这个例子中,IE会将其设定为IE7 mode。下面的范例显示该模式设定为其他值的状况。

<wbr></wbr>

< meta<wbr></wbr> http-equiv ="X-UA-Compatible" <wbr>content</wbr> ="IE=4" > <wbr><wbr><wbr></wbr></wbr></wbr> <!-- <wbr>IE5<wbr>mode<wbr></wbr></wbr></wbr> -->
< meta<wbr></wbr> http-equiv ="X-UA-Compatible" <wbr>content</wbr> ="IE=7.5" > <wbr></wbr> <!-- <wbr>IE7<wbr>mode<wbr></wbr></wbr></wbr> -->
< meta<wbr></wbr> http-equiv ="X-UA-Compatible" <wbr>content</wbr> ="IE=100" > <wbr></wbr> <!-- <wbr>IE8<wbr>mode<wbr></wbr></wbr></wbr> -->
< meta<wbr></wbr> http-equiv ="X-UA-Compatible" <wbr>content</wbr> ="IE=a" > <wbr><wbr><wbr></wbr></wbr></wbr> <!-- <wbr>IE5<wbr>mode<wbr></wbr></wbr></wbr> --> <wbr><br><br></wbr> <!-- <wbr>This<wbr>header<wbr>mimics<wbr>Internet<wbr>Explorer<wbr>7<wbr>and<wbr>uses<wbr><br> &lt;!DOCTYPE&gt;<wbr>to<wbr>determine<wbr>how<wbr>to<wbr>display<wbr>the<wbr>Web<wbr>page<wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr> -->
< meta<wbr></wbr> http-equiv ="X-UA-Compatible" <wbr>content</wbr> ="IE=EmulateIE7" > <wbr><wbr></wbr></wbr>

注意: 前面的范例显示单独的内容值。实际上IE只会执行网页中第一个X-UA-Compatible标头。

你也可以使用内容属性来指定复数的文件兼容性模式,这能帮助确保你的网页在未来的浏览器版本都能一致的显示。欲设定复数的文件模式,请设定内容属性以判别你想使用的模式。使用分号来分开各个模式。

如果一个特定版本的IE支持所要求的兼容性模式多于一种,将採用列于标头内容属性中最高的可用模式。你可以使用这个特性来排除特定的兼容性模式,虽然并不推荐这样做。举例来说,下列标头即会排除IE7 mode。

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

<wbr></wbr>

<wbr></wbr>

结论

兼容性对于网页设计师来说是非常重要的顾虑。虽然最好是可以建立一个完全不需依赖任何网页浏览器特性或功能的网站,有时候这是不可能实现的。文件兼容性模式便能将网页限制在某个特定版本的IE中。

使用X-UA-Compatible标头来指定你的页面支持的IE版本。使用document.documentMode 判定页面的兼容性模式。

选择支持某个特定版本的IE,你可以确保你的页面在未来的浏览器版本中也能有显示的一致

分享到:
评论

相关推荐

    解决各种IE兼容问题_IE6_IE7_IE8_IE9_IE10

    1. `IE=8`:这将强制IE8使用其自身的标准模式,而不是更旧的兼容模式。 2. `chrome=1`:当设置此值时,启用Google Chrome Frame插件,使IE浏览器能够使用Chrome的渲染引擎,从而获得更好的Web标准支持。 3. `IE=7`:...

    一行代码解决各种IE兼容问题,IE6,IE7,IE8,IE9,IE10

    3.强制IE8使用IE7模式来解析 “X-UA-Compatible” content=“IE=EmulateIE7″&gt;&lt;!– IE7 mode –&gt; //或者 “X-UA-Compatible” content=“IE=7″&gt;&lt;!– IE7 mode –&gt; 4.强制IE8使用IE6或IE5模式来解析 “X-UA-...

    IE8调用IE7渲染模式,网页高度根据内容高度显示

    在网页开发过程中,兼容...在某些情况下,特别是当网页代码依赖于IE7的特定行为时,我们需要强制IE8使用这种模式。 要让IE8运行在IE7兼容模式,关键在于添加一个特定的HTTP元标签(meta tag)。这个标签是: ```html ...

    IE7与IE8的兼容性 配置文档

    - `IE=EmulateIE7`:强制IE8使用IE7的渲染模式,适用于那些为IE7优化的网站。 - `IE=EmulateIE9`:即使在IE8或更低版本的IE中,也强制使用IE9的渲染模式。 ### 实施步骤 1. **服务器端配置**:如果你的网站托管在...

    IE8如何定义浏览器工作模式避免网页显示混乱

    其次,当仅更改DOCTYPE仍然无法解决问题时,可以使用HTML的META标签`&lt;meta http-equiv="X-UA-Compatible" content="IE=8" /&gt;`来强制IE8使用特定的渲染模式。这个元标签告诉浏览器使用特定的“用户代理兼容性视图”,...

    ie6与ie7 8区别

    例如,可以通过`&lt;meta&gt;`标签来强制IE8以IE7模式渲染页面。 ```html &lt;meta http-equiv="X-UA-Compatible" content="IE=7" /&gt; ``` #### 四、DOM支持 - **DOM兼容性**:IE6、IE7和IE8在DOM支持方面存在差异,例如...

    让你的网站IE8浏览自动用IE7兼容模式

    例如,要在IE8中强制使用IE7兼容模式,可以在头部添加以下代码: ```html &lt;meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"&gt; ``` 总的来说,文件兼容性是解决浏览器版本差异和确保网站在各种环境下...

    IE6、IE7、IE8、Firefox、Chrome、Safari的CSS hack兼容一览表

    - **IE7 兼容**: 如果页面对IE7兼容没有问题,但又想在IE8中正常使用,可以通过添加元信息标签来强制IE8以IE7的渲染模式打开页面: ```html &lt;meta http-equiv="x-ua-compatible" content="ie=7" /&gt; ``` - **body...

    深入解析IE兼容模式问题

    深入解析IE兼容模式问题,这是一个关键的议题,特别是在Web开发中,因为Internet Explorer(IE)浏览器在历史上曾因其独特的渲染方式和兼容性问题而闻名。文件兼容性是解决这个问题的一种机制,它允许开发者控制IE...

    IE8浏览器,重装IE8浏览器

    此模式使得浏览器以更古老版本的渲染引擎来显示网页,保证了与旧版网页的良好兼容。 **重装IE8的步骤** 1. **备份数据**:在进行任何系统更改前,确保备份重要的个人文件和设置。 2. **下载安装文件**:如提供的...

    div错位解决IE6、IE7、IE8样式不兼容问题IE6里DIV错位的问题.doc

    如果需要在整个网站范围内设置IE兼容模式,可以在服务器端进行配置。对于IIS服务器,可以在`web.config`文件中加入以下内容: ```xml &lt;?xml version="1.0" encoding="utf-8"?&gt; ...

    IE6_IE7_IE8 CSS 兼容速查表

    本篇文章将深入探讨IE6、IE7、IE8中的CSS兼容性问题,并提供相应的解决策略。 1. **盒模型差异**:IE6、7使用其特有的“怪异盒模型”,其中元素的宽度和高度包括了边框和内边距,而W3C标准盒模型则将这些部分排除...

    IE9浏览器中网页无法正常显示的解决方法

    在描述中提到的方法就是这个原理,即在`&lt;head&gt;`标签内加入`&lt;meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8"/&gt;`,这将强制浏览器使用IE8的兼容模式解析页面。 2. **用户端的兼容性视图设置**:对于普通...

    content=”IE=7, IE=9″意思理解

    为了解决这个问题,可以在网站头部添加`&lt;meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"&gt;`来强制IE8使用IE7的标准模式。而`&lt;meta http-equiv="X-UA-Compatible" content="IE=7, IE=9"&gt;`则进一步扩展了...

    IE8优化(模仿IE6)

    2. **使用X-UA-Compatible头部**:在HTTP响应头或者HTML `&lt;meta&gt;` 标签中设置`X-UA-Compatible`指令,可以强制IE8使用特定的渲染引擎。例如,`&lt;meta http-equiv="X-UA-Compatible" content="IE=EmulateIE6"&gt;`会让IE8...

    完美解决IE兼容模式问题(使IE使用固定的渲染模式)

    总的来说,理解和正确使用`X-UA-Compatible`元标签是解决IE兼容性问题的关键,它能帮助开发者确保网页在不同版本的IE浏览器中都能正常显示,同时尽可能利用最新的渲染技术。在开发过程中,使用F12开发者工具来检查和...

    如何解决ie兼容性问题

    在网页开发过程中,IE...总的来说,解决IE兼容性问题需要结合多种技术手段,并且需要持续关注浏览器的更新和新特性的兼容性。通过合理的代码组织和测试,可以有效地减少兼容性问题,为用户提供一致的浏览体验。

    pdfjs预览插件,兼容IE浏览器

    PDF.js提供了一个名为`useWorkerSrc`的配置项,可以设置为false,强制使用2D渲染。 5. **错误处理**: 由于IE的兼容性问题,可能会遇到各种异常情况,需要编写完善的错误处理代码,捕获并处理可能出现的错误。 6....

    让IE8启动IE7兼容模式的代码

    通过设置`content`属性为`IE=EmulateIE7`,可以指示IE8使用IE7的渲染引擎来解析和显示页面,从而解决与IE7不兼容的问题。完整的代码如下: ```html &lt;meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /&gt;...

Global site tag (gtag.js) - Google Analytics