未来兼容性中的 META 标记和锁定

注意:本文档是预备文档,随时可能变更。

对于 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 SpecificationW3C 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。

在 IIS 上实现 META 切换
在 Apache 上实现 META 切换

如果使用 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;}      
</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> X-UA-Compatible是针对ie8新加的一个设置,对于ie8之外的浏览器是不识别的,这个区别与 content="IE=7"在无论页面是否包含<!DOCTYPE>指令,都像是使用了 Windows Internet Explorer 7的标准模式。而content="IE=EmulateIE7"模式遵循<!DOCTYPE>指令。对于多数网站来说,它是首选的兼容性模式。
目前IE8尚在测试版中,所以为了避免制作出的页面在IE8下面出现错误,建议直接将IE8使用IE7进行渲染。也就是直接在页面的header的meta标签中加入如下代码:
<meta http-equiv="X-UA-Compatible" content="IE=7" />  这样我们才能使得页面在IE8里面表现正常!

<META http-equiv=X-UA-Compatible content=IE=EmulateIE7>的更多相关文章

  1. 简单物联网:外网访问内网路由器下树莓派Flask服务器

    最近做一个小东西,大概过程就是想在教室,宿舍控制实验室的一些设备. 已经在树莓上搭了一个轻量的flask服务器,在实验室的路由器下,任何设备都是可以访问的:但是有一些限制条件,比如我想在宿舍控制我种花 ...

  2. 利用ssh反向代理以及autossh实现从外网连接内网服务器

    前言 最近遇到这样一个问题,我在实验室架设了一台服务器,给师弟或者小伙伴练习Linux用,然后平时在实验室这边直接连接是没有问题的,都是内网嘛.但是回到宿舍问题出来了,使用校园网的童鞋还是能连接上,使 ...

  3. 外网访问内网Docker容器

    外网访问内网Docker容器 本地安装了Docker容器,只能在局域网内访问,怎样从外网也能访问本地Docker容器? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动Docker容器 ...

  4. 外网访问内网SpringBoot

    外网访问内网SpringBoot 本地安装了SpringBoot,只能在局域网内访问,怎样从外网也能访问本地SpringBoot? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装Java 1 ...

  5. 外网访问内网Elasticsearch WEB

    外网访问内网Elasticsearch WEB 本地安装了Elasticsearch,只能在局域网内访问其WEB,怎样从外网也能访问本地Elasticsearch? 本文将介绍具体的实现步骤. 1. ...

  6. 怎样从外网访问内网Rails

    外网访问内网Rails 本地安装了Rails,只能在局域网内访问,怎样从外网也能访问本地Rails? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动Rails 默认安装的Rails端口 ...

  7. 怎样从外网访问内网Memcached数据库

    外网访问内网Memcached数据库 本地安装了Memcached数据库,只能在局域网内访问,怎样从外网也能访问本地Memcached数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装 ...

  8. 怎样从外网访问内网CouchDB数据库

    外网访问内网CouchDB数据库 本地安装了CouchDB数据库,只能在局域网内访问,怎样从外网也能访问本地CouchDB数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动Cou ...

  9. 怎样从外网访问内网DB2数据库

    外网访问内网DB2数据库 本地安装了DB2数据库,只能在局域网内访问,怎样从外网也能访问本地DB2数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动DB2数据库 默认安装的DB2 ...

  10. 怎样从外网访问内网OpenLDAP数据库

    外网访问内网OpenLDAP数据库 本地安装了OpenLDAP数据库,只能在局域网内访问,怎样从外网也能访问本地OpenLDAP数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动 ...

随机推荐

  1. Mybatis 动态sql标签

    1.动态SQL片段 通过SQL片段达到代码复用         <!-- 动态条件分页查询 -->          <sql id="sql_count"> ...

  2. try---catch异常处理

    try { sc.Send(msg); return; } catch (Exception ex) { //AlertInfo("发送失败," + ex); return ; }

  3. 【转】js onclick用法:跳转到指定URL

    使用onclick跳转到其他页面/跳转到指定url   ☆如果是本页显示可以直接用location,方法如下: ①onclick="javascript:window.location.hr ...

  4. NEFU 2016省赛演练一 F题 (高精度加法)

    Function1 Problem:F Time Limit:1000ms Memory Limit:65535K Description You know that huicpc0838 has b ...

  5. mui

    MUI + SDK 使用笔记:   MUI是什么:http://ask.dcloud.net.cn/article/91   /* MUI 使用说明: * * 1.每个用到mui的页面都调用下mui. ...

  6. [MAC] mac系统如何显示和隐藏文件

    转载地址: http://www.cnblogs.com/lm3515/archive/2010/12/08/1900271.html 显示Mac隐藏文件的命令:defaults write com. ...

  7. 记录远程桌面登录者的IP和MAC

    WINDOWS 2003 远程桌面不能记录登陆IP真是件头痛的事,本方法可以记录登陆者IP,具体的操作步骤如下: 1.建立一个存放日志的目录,如C盘下建立一个RDP的目录“C:/RDP”. 2.然后在 ...

  8. COURSES(poj 1469)

    题意: 给你p门课程和n个学生,一个学生可以选0门,1门,或者多门课程,现在要求一个由p个学生组成的集合,满足下列2个条件: 1.每个学生选择一个不同的课程 2.每个课程都有不同的代表 如果满足,就输 ...

  9. (*p)++和*(p++)和*p++的区别

    * 和++优先级是同一级别,同一级别按照从右往左的顺序计算 所以:  *p++等价于*(p++) #define debug(x) cout << #x << " a ...

  10. Android Studio安装与配置

    谷歌已经停止支持eclipse开发android了,转向android studio是大势所趋,笔者由于电脑配置的原因, 以前迟迟不愿意向android studio,现如今因为开始学习materia ...