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

前言

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

认识文件兼容性模式

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>

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

判定文件兼容性模式

要判定网页使用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,你可以确保你的页面在未来的浏览器版本中也能有显示的一致性。

设置IE兼容模式的更多相关文章

  1. 使用X-UA-Compatible来设置IE8兼容模式

    使用X-UA-Compatible来设置IE8兼容模式 本文向大家描述一下如何使用X-UA-Compatible来设置IE8兼容模式,X-UA-Compatible是针对IE8兼容模式,X-UA-Co ...

  2. 来设置IE兼容模式

    来设置IE兼容模式 文件兼容性用于定义让IE如何编译你的网页.此文件解释文件兼容性,如何指定你网站的文件兼容性模式以及如何判断一个网页该使用的文件模式. 前言 为了帮助确保你的网页在所有未来的IE版本 ...

  3. 设置IE兼容模式的几种方法

    一.指定文件兼容性模式要为你的网页指定文件模式,需要在你的网页中使用meta元素放入x-ua-compatible http-equiv 标头.1. 强制ie8使用ie8模式来解析,而且那个兼容性视图 ...

  4. 使用X-UA-Compatible来设置IE兼容模式

    转自:http://www.cnblogs.com/libra/archive/2009/03/24/1420731.html 英文原文:http://msdn.microsoft.com/en-us ...

  5. IE 兼容模式 设置 Meta Compatible 和 Iframe 子页面的关系

    背景 因为历史原因,之前很多的系统都会是 顶级页面+Iframe来加载子级页面的这种模式构件系统,而且系统都只能运行在IE6或者IE 高版本兼容模式下(IE 7模式). 随着现在的审美原来越高,脚本能 ...

  6. IE8兼容模式设置

    设置---兼容性视图设置--添加此网站--在IE8中调试(防止调整IE内核后浏览器崩溃,360可通过设置极速模式-兼容模式  点击地址栏绿色图标)

  7. 使用X-UA-Compatible来设置IE浏览器兼容模式(转)

    使用X-UA-Compatible来设置IE浏览器兼容模式 文件兼容性用于定义让IE如何编译你的网页.此文件解释文件兼容性,如何指定你网站的文件兼容性模式以及如何判断一个网页该使用的文件模式. 前言 ...

  8. X-UA-Compatible设置兼容模式

    原文地址:http://www.cnblogs.com/kingboy2008/archive/2011/07/01/2226424.html   IE浏览器的兼容性一直是网站开发人员头疼的事情,众所 ...

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

    强制将IE8设置为IE7兼容模式来解析网页 英文原文:http://msdn.microsoft.com/en-us/library/cc288325(VS.85).aspx 文件兼容性用于定义让IE ...

随机推荐

  1. HDU 2517 / POJ 1191 棋盘分割 区间DP / 记忆化搜索

    题目链接: 黑书 P116 HDU 2157 棋盘分割 POJ 1191 棋盘分割 分析:  枚举所有可能的切割方法. 但如果用递归的方法要加上记忆搜索, 不能会超时... 代码: #include& ...

  2. 常用wxPython事件描述

          事件描述 EVT_SIZE 由于用户干预或由程序实现,当一个窗口大小发生改变时发送给窗口. EVT_MOVE 由于用户干预或由程序实现,当一个窗口被移动时发送给窗口. EVT_CLOSE ...

  3. Search gold(dp)

    Search gold Time Limit: 3000/1000MS (Java/Others)     Memory Limit: 65535/65535KB (Java/Others) Subm ...

  4. iOS 四种延时的方法

    - (void)initBlock{     //延时的方法     //1:GCD延时 此方式在能够在參数中选择运行的线程. 是一种非堵塞的运行方式,没有找到取消运行的方法.     double ...

  5. 依赖注入及AOP简述(一)——“依赖”的概念 .

    一.入门:依赖注入 作为一种全新的设计模式理念,“依赖注入”这个词汇在软件设计开发中已经是越来越耳熟能详了,而各种流行于开源社区的“依赖注入框架”,也越来越多的被当作软件工程开发过程中使用的基础框架. ...

  6. 绿色mysql启动脚本

    启动脚本如下:./mysqld_safe --defaults-file=/export/servers/mysql-5.5.38/my.cnf --ledir=/export/servers/mys ...

  7. Ext 随笔

    /-------------------------//清空panel等后面空白属性//------------------------- baseCls:"x-plain" // ...

  8. Ucenter整合Thinkphp 双向同步登录退出

    1.整合初步工作: 1,安装Ucenter,完成后添加应用,填写要对接的网站地址 2,api , uc_client目录放置对接项目的根目录 3,通信对接,新建Ucenter组,confi文件填写在u ...

  9. 关于lvs+keepalived只加入一台realserver问题

    今天做lvs+keepalived+mysql项目实施方案,在配置lvs+keepalived时都是ok的,但是就只加入第一台realserver.本人也感到很奇怪,lvs+keepalived本人也 ...

  10. 浏览器加载模式:window.onload和$(document).ready()的区别(详解)

    jQuery库文件是在body元素之前加载的,必须等待所有的DOM元素加载后,延迟支持DOM操作,否则就无法获取到. 在延迟等待加载,JavaScript提供了一个事件为load,方法如下: wind ...