文件兼容性用于定义让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 Apache
Implementing 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,你可以确保你的页面在未来的浏览器版本中也能有显示的一致性。

(转)

让IE依据HTML头标签选择显示模式的更多相关文章

  1. 【转】你所不知道的HTML <head/> 头标签

    HTML的头部内容特别多,有针对SEO的头部信息,也有针对移动设备的头部信息.而且各个浏览器内核以及各个国内浏览器厂商都有些自己的标签元素,有很多差异性.移动端的工作已经越来越成为前端工作的重要内容, ...

  2. [转] 移动前端不得不了解的HTML5 head 头标签

    HTML的头部内容特别多,有针对SEO的头部信息,也有针对移动设备的头部信息.而且各个浏览器内核以及各个国内浏览器厂商都有些自己的标签元 素,有很多差异性.移动端的工作已经越来越成为前端工作的重要内容 ...

  3. 移动前端不得不了解的HTML5 head 头标签(2016最新版)

    小编推荐:掘金是一个高质量的技术社区,从 ECMAScript 6 到 Vue.js,性能优化到开源类库,让你不错过前端开发的每一个技术干货.各大应用市场搜索「掘金」即可下载APP,技术干货尽在掌握. ...

  4. 《前端之路》之五 head 头标签指南

    12:head 头标签指南 常见头标签 DOCTYPE 文档模式 对文档进行有效性验证 告诉用户代理或浏览器这个文档是按照什么DTD写的,但是这个动作是被动的,每次页面加载时,浏览器并不会下载DTD, ...

  5. 移动前端不得不了解的html5 head 头标签

    本文主要内容来自一丝的常用的 HTML 头部标签和百度FEX的HTML head 头标签. 移动端的工作已经越来越成为前端工作的重要内容,除了平常的项目开发,HTML 头部标签功能,特别是meta标签 ...

  6. 【转】移动前端不得不了解的html5 head 头标签

    来源:http://blog.csdn.net/huang100qi/article/details/42596799 本文主要内容来自一丝的常用的 HTML 头部标签和百度FEX的HTML head ...

  7. Html5_移动前端不得不了解的html5 head 头标签

    移动前端不得不了解的html5 head 头标签   本文主要内容来自一丝的常用的 HTML 头部标签和百度FEX的HTML head 头标签. 移动端的工作已经越来越成为前端工作的重要内容,除了平常 ...

  8. HTML head 头标签

    HTML head 头部分的标签.元素有很多,涉及到浏览器对网页的渲染,SEO 等等,而各个浏览器内核以及各个国内浏览器厂商都有些自己的标签元素,这就造成了很多差异性.移动互联网时代,head 头部结 ...

  9. 详解HTML<head> 头标签元素的意义以及使用场景

    HTML<head>头部分的标签.元素有很多,涉及到浏览器对网页的渲染,SEO 等等,而各个浏览器内核以及各个国内浏览器厂商都有些自己的标签元素,这就造成了很多差异性.移动互联网时代,he ...

随机推荐

  1. 2018-2019-2 网络对抗技术 20165332 Exp3 免杀原理与实践

    2018-2019-2 网络对抗技术 20165332 Exp3 免杀原理与实践 实验内容 任务一:正确使用msf编码器,msfvenom生成如jar之类的其他文件,veil-evasion,自己利用 ...

  2. Android 之WebView实现下拉刷新和其他相关刷新功能

    最近项目中需要用到WebView下拉刷新的功能,经过查找资料终于完成了此功能,现在拿出来和大家分享一下.希望对大家有所帮助. 效果如下图:   代码: activity.xml <?xml ve ...

  3. 【Python】operator 模块简单介绍

    简单介绍几个常用的函数,其他的请参考文档. operator.concat(a, b) **operator.__concat__(a, b)** 对于 a.b序列,返回 a + b(列表合并) -- ...

  4. CSS3全新的背景图片方案

    CSS3全新的背景图片方案 firefox支持指定一个元素的ID将它作为另一个元素的背景-moz-element(#ID), webkit系支持-webkit-canvas(xxxx)动态创建一个ca ...

  5. WIN8.1 PRO RTM VOL.Enterprise.2013.10.17

    Windows 8.1 Pro VL (x64) - DVD (Chinese-Simplified)ISO|Chinese - Simplified|发布日期: 2013/10/17文件名: cn_ ...

  6. C# 调用C++ DLL 的类型转换(转载版)

    最近在做视频监控相关的demo开发,实现语言是C#,但视频监控的SDK是C++开发的,所以涉及到C#调用C++的dll库.很多结构体.参数在使用时都要先进行转换,由非托管类型转换成托管类型后才能使用. ...

  7. 使用jquery获取url以及jquery获取url参数的方法(转)

    使用jquery获取url以及使用jquery获取url参数是我们经常要用到的操作 1.jquery获取url很简单,代码如下 1.window.location.href; 其实只是用到了javas ...

  8. Linux 定制X86平台操作系统

    /********************************************************************************* * Linux 定制X86平台操作 ...

  9. LightOJ - 1205:Palindromic Numbers (数位DP&回文串)

    A palindromic number or numeral palindrome is a 'symmetrical' number like 16461 that remains the sam ...

  10. @Transactional、Spring的声明式事务

    传送门 一.Spring的声明式事务 需要在xml文件中配置 <!--配置事务管理器类--> <bean id="transactionManager" clas ...