本文转载自:http://www.cnblogs.com/0000/archive/2009/11/01/1593851.html

对于 Web 开发人员来说,文本兼容性是一个要考虑的重要问题。Windows Internet Explorer 8 引入了文本兼容性模式,该模式允许 Web 开发人员将浏览器设置为以与旧版本相同的方式显示网页,从而允许开发人员选择更新时间。

本文档将介绍由 Windows Internet Explorer 8 支持的文本兼容性模式,以及如何使用自定义标头基于每个页面或每个站点实现这些模式。实现适当的兼容性模式后,可以确保站点与 Windows Internet Explorer 8 及更高版本兼容。

各种兼容性模式

Windows Internet Explorer 8 支持多种兼容性模式,它们可启用不同的受支持的功能,并影响内容的呈现方式。例如,

IE5 模式呈现内容时,像是使用了 Windows Internet Explorer 7 的 Quirks 模式,这与 Windows Internet Explorer 5 显示内容的方式很相似。

IE7 模式呈现内容时,无论页面是否包含 <!DOCTYPE> 指令,都像是使用了 Windows Internet Explorer 7 的标准模式。

EmulateIE7 模式通知 Windows Internet Explorer 使用 <!DOCTYPE> 指令确定如何呈现内容。标准模式指令以 Windows Internet Explorer 7 标准模式显示,而 Quirks 模式指令以 IE5 模式显示。与 IE7 模式不同,EmulateIE7 模式遵循 <!DOCTYPE> 指令。对于多数网站来说,它是首选的兼容性模式。

IE8 模式最大限度地支持行业标准(包括 W3C Cascading Style Sheets Level 2.1 Specification 和 W3C Selectors API,并能有限支持 W3C Cascading Style Sheets Level 3 Specification(工作草案)

Edge 模式通知 Windows Internet Explorer 以最高级别的可用模式显示内容,这实际上破坏了“锁定”模式。对于 Windows Internet Explorer 8,这与 IE8 模式是等效的。如果(假定)Windows Internet Explorer 的未来版本支持更高级别的兼容模式,设置为 Edge 模式的页面将显示在由该版本支持的最高级别模式中;但是,当使用 Windows Internet Explorer 8 查看时,这些相同的页面仍将显示在 IE8 模式中。由于在 Windows Internet Explorer 的未来版本中呈现页面内容可能出现意外,建议 Web 开发人员将 Edge 模式仅用于测试页面和其他非生产活动。

基于每个页面指定兼容性模式

要为网页指定文本模式,请使用 META 元素,以在该网页中包含 X-UA-Compatible http-equiv 标头。以下示例指定了 EmulateIE7 模式兼容性。

HTML:
<html>
   <head>
   <!-- Mimic Internet Explorer 7 -->
      <title>我的网页</title>
      <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
   </head>
   <body>
      <p>内容在此处。</p>
   </body>
</html>

Content 属性指定了该页面的模式;例如,要模仿 Windows Internet Explorer 7 的行为,请指定 IE=EmulateIE7。同样,可指定 IE=5、IE=7 或 IE=8 以选择其中一种兼容性模式。您还可以指定 IE=edge 以通知 Windows Internet Explorer 8 使用最高级别的可用模式。

X-UA-compatible 标头不区分大小写;但是,它必须显示在网页中除 TITLE 和其他 META 元素以外的所有元素之前的标头(HEAD 部分)中。

基于每个站点指定兼容模式

通过使用 Web 服务器为站点定义自定义 HTTP 响应标头,可为网站指定文本模式。HTTP 响应标头是 Web 服务器附加到为响应 HTTP 请求而发送到浏览器中的文件的信息,这些信息通常包含发送回文件的日期、大小和类型。

下列文档介绍了将 Web 服务器配置为将自定义 HTTP 响应标头附加到所有网页中所需的步骤。这将导致 Windows Internet Explorer 8 使用指定的文本兼容性模式,例如 EmulateIE7。

如果使用 Web 服务器指定了默认文本兼容性模式,则可通过在特定的网页中指定其他文本兼容性模式来覆盖该设置。在该网页中指定的模式优先于由服务器指定的模式。

使用脚本确定文本兼容性模式

要使用 Windows Internet Explorer 8 确定网页的文本兼容性模式,请使用 document 对象的 documentMode 属性。例如,将以下内容键入到 Windows Internet Explorer 8 的地址栏中,可显示当前网页的文本模式。

javascript:alert(document.documentMode);

documentMode 属性可返回与页面的文本兼容性模式相对应的数值。例如,如果所选页面支持 IE8 模式,则 documentMode 会返回 8。

注意:在 Windows Internet Explorer 6 中引入的 compatMode 属性已不受支持,取而代之的是在 Windows Internet Explorer 8 中引入的 documentMode 属性。当前使用 compatMode 的应用程序仍然可以在 Windows Internet Explorer 8 中运行;但是,它们已更新为使用 documentMode。

如果希望使用 JavaScript 确定文本的兼容性模式,请在其中包含支持 Windows Internet Explorer 旧版本的代码,如以下示例所示。

JScript:
engine = null;
if (window.navigator.appName == "Microsoft Internet Explorer")
{
   // 这是一个 IE 浏览器。引擎处于哪种模式下?
   if (document.documentMode) // IE8
     engine = document.documentMode;
   else // IE 5-7
   {
      engine = 5; // 假设为 quirks 模式;除非另外证实是其他模式
      if (document.compatMode)
      {
         if (document.compatMode == "CSS1Compat")
            engine = 7; // 标准模式
      }
   }
   // 引擎变量现在包含文本兼容性模式。
}

此处使用的文档对象表示给定浏览器窗口中的 HTML 文档,可用来检查、修改 HTML 文档或将内容添加到该文档以及处理该文档中的事件。

使用条件注释确定文本兼容性模式

如果只需要适应 Windows Internet Explorer,以下代码示例说明了如何使用条件注释来适用于当前版本或旧版本。

HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN">
<html>
   <head>
      <title>测试页</title>
      <meta http-equiv="X-UA-Compatible" content="IE=8"/>
      <!--[if gte IE 8]>
      <style type="text/css">
      body {
       color:#0000ff;
       background-color:#000000;
      }
      </style>
      <![endif]-->
      <!--[if lt IE 8]>
      <style type="text/css">
      body {
       color:#000000;
       background-color:#ffffff;
      }
      </style>
      <![endif]-->
   </head>
   <body>
      <h1>
      <!--[if gte IE 8]>
      第 1 章。
      <![endif]-->
      第一章
      </h1>
      <h1>
      <!--[if gte IE 8]>
      第 2 章。
      <![endif]-->
      第二章
      </h1>
      将看到任何版本的文本。
   </body>

(转)IE=EmulateIE7 标签的作用的更多相关文章

  1. html的<meta>标签的作用

    <meta>标签包含了页面文档的上下文信息. 主要包含的上下文信息: 1.配置了服务器向浏览器响应时,http协议的head信息,浏览器根据head执行相应操作. 2.对页面的描述信息,便 ...

  2. meta标签详解(meta标签的作用)///////////////////////////转

    meta标签详解(meta标签的作用) 很多人却忽视了HTML标签META的强大功效,一个好的META标签设计可以大大提高你的个人网站被搜索到的可能性,有兴趣吗,谁我来重新认识一下META标签吧   ...

  3. <meta>标签的作用

    <META> 是放于 <HEAD> 与 </HEAD>之间的标记,功用与变化等对,所以我公式化地介绍. <meta name="Descriptio ...

  4. 请说明meta标签的作用。

    请说明meta标签的作用. 解答: meta是用来在HTML文档中模拟HTTP协议的响应头报文.meta 标签用于网页的<head>与</head>中,meta 标签的用处很多 ...

  5. 关于label标签的作用

    label标签的定义和用法: <label> 标签为 input 元素定义标注(标记). label 元素不会向用户呈现任何特殊效果.不过,它为鼠标用户改进了可用性.如果您在 label ...

  6. <mvc:view-controller path=""/>标签的作用

    <mvc:view-controller path=""/>标签的作用 对应WEB-INF目录下面的JSP页面,我们知道是不能直接使用URL访问到.需要通过转发的方式, ...

  7. JSP标签 <meta.....>作用总结

    <metahttp-equiv="pragma" content="no-cache"> <metahttp-equiv="cach ...

  8. nofollow标签的作用 nofollow标签添加方法

    这篇文章主要介绍了nofollow标签的作用 nofollow标签添加方法,需要的朋友可以参考下   nofollow标签的作用 nofollow标签添加方法  模拟搜狗蜘蛛   nofollow标签 ...

  9. Servlet-base标签的作用(相对路径和绝对路径)

    Web中的相对路径和绝对路径 在javaWeb中,路径分为相对路径和绝对路径: 相对路径: .     表示当前目录 .. 表示上一级目录 资源名 表示当前目录/资源名 绝对路径: http://ip ...

随机推荐

  1. 关于Jupyter Notebook默认起始目录设置无效的解决方法

    一.问题描述 今天折腾jupyter的时候,突然觉得起始目录是用户根目录很麻烦,想着把他改成自己的某个文件,按照网上方法折腾半天也还是无效.东点点西看看才发现端倪. [win10以下好像没这个问题,修 ...

  2. Ubuntu 18.04 下 emscripten SDK 的安装

    Ubuntu 18.04 下 emscripten SDK 的安装http://kripken.github.io/emscripten-site/docs/getting_started/downl ...

  3. C#的静态构造函数.cctor

    静态构造函数操作的是类(而非其实例的)成员.静态构造函数(.cctor)的一些特点:1. 声明和定义形式上,只能有static一个修饰符,不能有任何修饰符和返回值(也不能有void).2. 不能被显示 ...

  4. 【ccf2017-12-2】游戏(模拟)

    问题描述 有n个小朋友围成一圈玩游戏,小朋友从1至n编号,2号小朋友坐在1号小朋友的顺时针方向,3号小朋友坐在2号小朋友的顺时针方向,……,1号小朋友坐在n号小朋友的顺时针方向. 游戏开始,从1号小朋 ...

  5. Agilent RF fundamentals (5)

    2考虑两个因素 3 RX 4 TX RX switch use Duplexer

  6. 15 分钟学会 Eclipse GMF

    背景 坦白说:过去在 Eclipse 里使用 Graphical Editor Framework(GEF)创建图形化编辑器 既慢又痛苦.这个过程包括理解复杂的框架和大量的冗余代码.但也说明 GEF ...

  7. Android实现网易新闻客户端效果

    下面来简单实现一下网易新闻客户端左右切换的效果,当然实际项目上肯定不能这样写,还有很多需要优化的地方. activity_main.xml [html] view plaincopyprint? &l ...

  8. Electron 使用 Webpack2 预编译 Electron 和 Browser targets

    Electron 使用 Webpack2 预编译 Electron 和 Browser targets 前一篇文章说了说怎样使用 Webpack2 预编译 Electron 应用,但是有时候我们希望使 ...

  9. Azure VM Scalable Sets -- 适用IAAS架构

    1. 选择Virtual Machine scale set2. 选择resource manager(或创建最新)3. 基本信息配置4. 配置scale的参数(可伸缩的balance模型):VM最小 ...

  10. 你所不知道的,Java 中操作符的秘密?

    在 Java 编程的过程中,我们对数据的处理,都是通过操作符来实现的.例如,用于赋值的赋值操作符.用于运算的运算操作符等.用于比较的比较操作符,还包括逻辑操作符.按位操作符.移位操作符.三元操作符等等 ...