浏览器文档模式设置

对于 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>
时间: 2024-08-07 00:11:26

浏览器文档模式设置的相关文章

html中设置默认的浏览器文档模式

<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><TITLE>${systemConfig.getStringConfigValue("webtitle")}——登陆</TITLE><meta name="description" content=""

X-UA-Compatible IE 浏览器默认文档模式设置

制作网页的时候,IE8浏览器浏览页面的时候,有时候文档模式默认是IE7,导致IE8兼容性不是非常好.出现IE7应该出现的模式. 解决的方法例如以下: 在X-UA-Compatible中可用的方法有: <meta http-equiv="X-UA-Compatible" content="IE=5" > <meta http-equiv="X-UA-Compatible" content="IE=7" >

1关于script标签属性,注意点,浏览器文档模式

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>    <title></title></h

全栈JavaScript之路( 二十二 )IE 专有扩展——文档模式

ie8 引入了一个新的概念,"文档模式" ,页面的文档模式决定了,可以使用什么功能.也就是说,"文档模式",决定你了你可以使用哪个级别的css,在javascript可以使用哪些API, 以及如何对待文档类型(doctype). 两种方式修改: 通过 meta 标签修改,<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"> 在服务器端修改, res.

关于在IE浏览器中,文档模式为&quot;杂项&quot;即Quirks,position为absolute且页面有滚动条时设置right的问题

由于系统的html页面没有指定相应的DTD,即<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">或<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "ht

文档模式与IE浏览器模式

一.IE浏览器的兼容性视图 兼容性视图是微软为了兼容基于其它网页标准开发的网站,确保广大互联网用户在浏览网页时不至于受困于网页显示混乱的问题,而专门为IE8增加的一项实用功能.当IE8检测到某网站不兼容时,地址栏右侧就会出现兼容性视图按钮,只需轻轻一点,大部分网页显示就会正常了.(网页会以IE7的代码规范来显示) 它引入重要的两个概念便是“浏览器模式”和“文档模式”: 注:也可按F12进入开发人员工具来查看当前页面的浏览器模式和文档模式 二.文档模式 指定IE页面排版引擎根据哪一个版本的方式来解

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

原文:http://blog.csdn.net/neo_liu0000/article/details/7589731 什么是浏览器模式和文本模式? 经常使用IE开发者工具的同学,肯定见过浏览器模式和文本模式,对于这两个名词,综合相关文档解释如下: 浏览器模式(Browser Mode),用于切换IE针对该网页的默认文本模式.对不同版本浏览器的条件注释解析.决定请求头里userAgent的值.它在浏览器发出请求之前就已经确定,网站没有办法修改这个值.它代表的是用户以何种浏览器访问网站. 文本模式

如何使浏览器打开时,默认的文档模式就是标准模式

请看下方: 第一步,将代码设置成html5的模式,那么用户打开项目之后,文档模式就是标准的:即不会是ie5Qurik模式:但有可能是ie7标准模式: 第二步, 2.1 在html head中写上这句代码,即可时文档模式为你浏览器最高级别的模式:<meta http-equiv="X-UA-Compatible" content="IE=edge" />: 2.2 若你想已ie8的标准模式打开,就写成<meta http-equiv=X-UA-Com

360浏览器遇到文档模式是IE7的解决办法

这段时间遇到了360浏览器在加载java项目时,默认的文档模式是IE7,使得网页加载下拉框出现问题. 解决的方法是: 在显示的jsp页面加上 <meta http-equiv="X-UA-Compatible" content="IE=edge"> <head> <title></title> <meta http-equiv="X-UA-Compatible" content="I