文件兼容性用于定义让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 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浏览器模式设置的更多相关文章

  1. IE (第二部分) 浏览器 中 关于浏览器模式和文本模式

    判断真正的 IE 版本 很多 JS 框架都通过 UA 判断 IE 的版本.对于 IE6,这种做法没问题( IE6 没有浏览器模式的概念,也没有其它 IE 可以把浏览器模式改为 IE6:IE7 虽然也没 ...

  2. chrome浏览器 配置开机启动全屏(看板app模式设置)

        chrome浏览器 配置开机启动全屏(看板app模式设置) 1.下载安装chrome浏览器. 2.建立一个chrome浏览器的快键方式,右键打开属性,如下图: 3.将目标选项卡的值修改为:&q ...

  3. JS魔法堂:浏览器模式和文档模式怎么玩?

    一.前言 从IE8开始引入了文档兼容模式的概念,作为开发人员的我们可以在开发人员工具中通过“浏览器模式”和“文档模式”(IE11开始改为“浏览器模式”改成更贴切的“用户代理字符串”)品味一番,它的出现 ...

  4. IE的浏览器模式和文档模式

    只有IE浏览器中才会有“浏览器模式”和“文档模式”,兼容性视图涉及两个重要的功能 便是“浏览器模式[browser mode]”和“文档模式[document mode]”,在IE8/IE9中按F12 ...

  5. 【IE】浏览器模式与文档模式 及其开发中处理方式

    原文:http://blog.csdn.net/neo_liu0000/article/details/7589731 什么是浏览器模式和文本模式? 经常使用IE开发者工具的同学,肯定见过浏览器模式和 ...

  6. 再谈IE的浏览器模式和文档模式

    原文:再谈IE的浏览器模式和文档模式 以前在 “IE8兼容视图(IE7 mode)与独立IE7的区别”一文中曾经涉及过浏览器模式和文档模式,但二者的区别却不甚了了,现在有了新的认识,再补充一下. 1. ...

  7. IE8"开发人员工具"使用详解下(浏览器模式、文本模式、JavaScript调试、探查器)

    来源: http://www.cnblogs.com/JustinYoung/archive/2009/04/03/kaifarenyuangongju2.html 在上一篇文章IE8“开发人员工具” ...

  8. 浏览器模式&用户代理字符串(IE)

    问题问题描述今天在做项目的时候,QA部门提了一个Bug,在一个搜索列表中,搜索栏为空时刷新页面,却触发了搜索功能,并且列表显示出<未搜索到结果> 环境IE11 问题原因 QA的IE11用户 ...

  9. IE (第一部分) 浏览器 中 关于浏览器模式和文本模式的困惑

    什么是浏览器模式和文本模式? 经常使用IE开发者工具的同学,肯定见过浏览器模式和文本模式,对于这两个名词,综合相关文档解释如下: 浏览器模式(Browser Mode),用于切换IE针对该网页的默认文 ...

随机推荐

  1. Objective-c归档的概念和用法

  2. Caffe学习系列(6):Blob,Layer and Net以及对应配置文件的编写

    深度网络(net)是一个组合模型,它由许多相互连接的层(layers)组合而成.Caffe就是组建深度网络的这样一种工具,它按照一定的策略,一层一层的搭建出自己的模型.它将所有的信息数据定义为blob ...

  3. 安卓界面篇(一) 自定义一个topbar

    步骤一: 先在values 里 新建一个attrs.xml 来设置我们的属性值: <?xml version="1.0" encoding="utf-8" ...

  4. 学习Shell脚本编程(第2期)_编写修改权限及执行Shell程序的步骤

    编写Shell程序 执行Shell程序 Shell程序有很多类似C语言和其他程序设计语言的特征,但是又没有程序语言那样复杂.Shell程序是指放在一个文件中的一系列Linux命令和实用程序.在执行的时 ...

  5. leetcode总结:permutations, permutations II, next permutation, permutation sequence

    Next Permutation: Implement next permutation, which rearranges numbers into the lexicographically ne ...

  6. Arduino智能小车实践学习报告

    Arduino智能小车实践学习报告 参与人员: 20135316 王剑桥 20135312 吴汉彦 20135319 朱锂 一. 背景了解: 单片机:将中央处理单元CPU(进行运算.控制).随机存储器 ...

  7. 20145208 《Java程序设计》第6周学习总结

    20145208 <Java程序设计>第6周学习总结 教材学习内容总结 输入与输出 InputStream与OutputStream 从应用程序角度来看,如果要将数据从来源取出,可以使用输 ...

  8. css3动画 bug 2点

    1. .myanimate{ transition-property: left;transition-duration: .3s;transition-timing-function: ease } ...

  9. Boostrap(2)

    网页布局 1.网格布局 网格布局就是把网页分为许多小格子,看起来像table,然后在每个小格子中放我们的内容.当然,我们也可以指定一片区域使用网格系统.网格布局主要是应用在移动设备上的,使用方法如下: ...

  10. redis学习笔记——(3)

    7.Redis中的set类型       sadd set value:向set中添加元素value. srem set value:删除set中的元素value. spop set:随机返回并删除s ...