【转】http-equiv="X-UA-Compatible" 设置IE浏览器兼容模式详解

文件兼容性用于定义让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 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来选择其中一种兼容性模式。你也可以指定IE=edge来指示IE8使用它支持的最高模式。

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

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

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

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

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

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

Implementing the META Switch on ApacheImplementing the META Switch on IIS

判定文件兼容性模式

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

javascript:alert(document.documentMode);

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

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

若你希望使用JavaScript判定一个文件的兼容性模式，引入下面范例的这段程式码可支持旧版本的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-7
{
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只会执行网页中第一个X-UA-Compatible标头。

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

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

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

结论

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

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

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

---------------------------  原文  ---------------------------

另：

X-UA-Compatible设为IE=edge是不是等同于不设置？

不一样。有些因素会自动触发兼容性文档视图，这个时候设置这个X-UA-Compatible就可以防止这个自动触发的行为

默认行为大致有这些：

  • 存在于注册表中的兼容性视图列表，当url匹配时将自动切换到兼容性视图
  • 在注册表中的对应字段指定了使用兼容性视图来显示所有网站
  • 未指定DOCTYPE，则使用Quirks模式
  • 曾经遇到过错误

另：

<meta http-equiv = "X-UA-Compatible" cotent = "IE=edge,chrome=1"/>

这是个是IE8的专用标记,用来指定IE8浏览器去模拟某个特定版本的IE浏览器的渲染方式，以此来解决部分兼容问题，例如模拟IE7的具体方式如 下：< meta http-equiv = "X-UA-Compatible" content = "IE=EmulateIE7" />但令我好奇的是，此处这个标记后面竟然出现了chrome这样的值，难道IE也可以模拟chrome了？迅速搜索了一下，才明白原来不是微软增 强了IE，而是谷歌做了个外挂：Google Chrome Frame（谷歌内嵌浏览器框架GCF）。这个插件可以让用户的IE浏览器外不变，但用户在浏览网页时，实际上使用的是Google Chrome浏览器内核，而且支持IE6、7、8等多个版本的IE浏览器，谷歌这个墙角挖的真给力！

而上文提到的那个meta标记，则是在是安装了GCF后，用来指定页面使用chrome内核来渲染。安装完成后,如果你想对某个页面使用GCF进行渲
染，只需要在该页面的地址前加上 gcf： 即可，例如：
gcf:http://cooleep.com但是如果想要在开发时指定页面默认首先使用GCF进行渲染，如果未安装GCF再使用IE内核进行渲染，该如
何进行呢？
就是使用这个标记。

标记用法：
       阅读了下chrome的开发文档（http://www.chromium.org/developers/how-tos/chrome-frame-getting-started），下面来简单讲解一下这个标记的语法。

1.最基本的用法：在页面的头部加入

<meta http-equiv = "X-UA-Compatible" cotent = "IE=edge,chrome=1"/>

这样写可以达到的效果是如果安装了GCF，则使用GCF来渲染页面，如果为安装GCF，则使用最高版本的IE内核进行渲染。

2.通过修改HTTP头文件的方法来实现让指定的页面使用GCF内核进行渲染：
 在HTTP的头文件中加入以下信息：X-UA-Compatible: chrome=1
在Apache服务器中，确保 mod_headers 和 mod_setenvif文件可用，然后在httpd.conf中加入以下配置信息：

Xml代码  

<IfModule mod_setenvif.c>
<IfModule mod_headers.c>
BrowserMatch chromeframe gcf
Header append X-UA-Compatible "chrome=1" env=gcf
</IfModule >
</IfModule >

在IIS7或者更高版本的服务器中，只需要修改web.config文件,添加如下信息即可即可:

Xml代码  

<span style="color: #000000;">< configuration >
< system.webServer >
< httpProtocol >
< customHeaders >
< add name = "X-UA-Compatible" value = "chrome=1" />
</ customHeaders >
</ httpProtocol >
</ system.webServer >
</ configuration ></span>
时间： 2024-10-13 04:20:14

【转】http-equiv="X-UA-Compatible" 设置IE浏览器兼容模式详解的相关文章

使用X-UA-Compatible来设置IE浏览器兼容模式

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

css网页中设置背景图片的方法详解

css网页中设置背景图片的方法详解 在css代码中设置背景图片的方法,包括背景图片.背景重复.背景固定.背景定位等 用css设置网页中的背景图片,主要有如下几个属性: 1,背景颜色 {background-color:数值}2,背景图片 {background-image: url(URL)|none}3,背景重复 {background-repeat:inherit|no-repeat|repeat|repeat-x|repeat-y}4,背景固定 {background-attachment

使用X-UA-Compatible来设置IE8/IE9兼容模式

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

PHP header函数设置http报文头示例详解

//定义编码 header( 'Content-Type:text/html;charset=utf-8 '); //Atom header('Content-type: application/atom+xml'); //CSS header('Content-type: text/css'); //Javascript header('Content-type: text/javascript'); //JPEG Image header('Content-type: image/jpeg'

为什么要设置Java环境变量（详解）

从大二开始接触Java,之后是断断续续的学习.大三真正开始Java之旅,估计大部分初学者在学Java时被Java的环境变量搞的晕头转向,虽然找到了正确设置环境变量的方式,但其中的原因一知半解,设置压根不知道是何原因. 今天为止对环境变量的设置还不是很懂,而且网上的大部分资料几乎都是设置方法,没有说原因.今天学Linux,遇到了Java环境变量的设置,无意间找到了详细透彻讲解Java环境变量的设置. “ 1. PATH环境变量.作用是指定命令搜索路径,在shell下面执行命令时,它会到PATH变量

树莓派的设置及opencv的安装详解

1.树莓派的系统下载网站为:https://www.raspberrypi.org/downloads/raspbian/,其中选择Raspbian Jessie with desktop此版本,另外的mini版功能不是很健全,不推荐. 当然也可以在https://www.raspberrypi.org/downloads/网址下载NOOBS然后选择安装,据说会更简洁. 下载raspbian系统时可以用utorrent种子软件来下载,速度可达2M左右,很节省时间.系统压缩包为1.6G,安装完成占

为什么要设置Java环境变量（详解）[转]

从大二开始接触Java,之后是断断续续的学习.大三真正开始Java之旅,估计大部分初学者在学Java时被Java的环境变量搞的晕头转向,虽然找到了正确设置环境变量的方式,但其中的原因一知半解,设置压根不知道是何原因. 今天为止对环境变量的设置还不是很懂,而且网上的大部分资料几乎都是设置方法,没有说原因.今天学Linux,遇到了Java环境变量的设置,无意间找到了详细透彻讲解Java环境变量的设置. “ 1. PATH环境变量.作用是指定命令搜索路径,在shell下面执行命令时,它会到PATH变量

R语言笔记 R中设置图形参数--函数par()详解

R有着非常强大的绘图功能,我们可以利用简单的几行代码绘制出各种图形来,但是有时候默认的图形设置没法满足我们的需要,甚至会碰到各种各样的小问题:如坐标轴或者标题出界了,或者图例说明的大小或者位置遮挡住了图形,甚至有时候默认的颜色也不能满足我们的需求.如何进行调整呢?这就用到了"强大"的函数par().我们可以通过设定函数par()的各个参数来调整我们的图形,这篇博文就是对函数par()的各个参数进行一下总结. 函数par()的使用格式如下: par(..., no.readonly =

什么尼康没有把取景线条设置成九宫格，而是设置成16格，详解

http://forum.xitek.com/thread-1008606-1-1-1.html 看到一个神贴,详细解释了为什么尼康没有吧取景线条设置成九宫格,而是设置成16格.在此,向鹿鸣幽谷 表示感谢.解决我一个大问题. 鹿鸣幽谷 在实时取景中才能显示,取景器内没有.用屏幕实时取景的时候,按快门旁边的 info 键,屏幕会有三种模式(名字都是我起的,就那个意思):信息量少的干净模式.当前拍摄参数显示.分割线模式(代替黄金分割模式).D3100并没有像传统相机那样提供九宫格,当初我也很纳闷,觉