IE兼容性之杂项(Quirks)模式

此文转载,记录下遇到的问题,暂时没有仔细考究。

IE=EmulateIE7 标签的作用

对于 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-10-28 08:58:20

IE兼容性之杂项(Quirks)模式的相关文章

IE8 浏览器文本模式变为杂项(quirks)页面变形的解决方法

IE8 浏览器文本模式(document.documentMode)变为杂项(quirks)页面变形的解决方法. 正常情况下 document.documentMode 输出为8,而变为杂项之后document.documentMode输出为5. 检查文件头 1.书写是否正确 定义IE8 文本模式为IE8<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">IE8 文本模式为杂项(quirks):无定义

爱创课堂每日一题第二天8/24日 Quirks模式是什么?它和Standards模式有什么区别?

从IE6开始,引入了Standards模式,标准模式中,浏览器尝试给符合标准的文档在规范上的正确处理达到在指定浏览器中的程度. 在IE6之前CSS还不够成熟,所以IE5等之前的浏览器对CSS的支持很差, IE6将对CSS提供更好的支持,然而这时的问题就来了,因为有很多页面是基于旧的布局方式写的,而如果IE6 支持CSS则将令这些页面显示不正常,如何在即保证不破坏现有页面,又提供新的渲染机制呢? 在写程序时我们也会经常遇到这样的问题,如何保证原来的接口不变,又提供更强大的功能,尤其是新功能不兼容旧

如果浏览器自动调用quirks模式打开的话

(从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期 2014-03-21) 则肯定你的html的声明,没有写好. 今天遇到几个,前面莫名其妙的多了个空格(在网页上看源码是多空格,复制到netbeans中打开,显示的是一个小横线,很短的.) 此短线很短,像是个点,复制下来,在记事本和word中都无法粘贴显示的,但是在netbeans中显示是一个小横点.可能是格式问题. 再次修正:(2015.5.26抢救百度文章时添加) 不单是声明的问题,如果你的html代码中有不规范的地方,让ie误

Quirks模式&amp;Standards模式

从 IE6 开始,引入了 Standards 模式,标准模式中,浏览器尝试给符合标准的文档在规范上 的正确处理达到在指定浏览器中的程度. 在 IE6 之前 CSS 还不够成熟,所以 IE5 等之前的浏览器对 CSS 的支持很差, IE6 将对 CSS 提供更好的支持,然而这时的问题就来了,因为有很多页面是基于旧的布局方式写的,而如 果 IE6 支持 CSS 则将令这些页面显示不正常,如何在即保证不破坏现有页面,又提供新的 渲染机制呢? 在写程序时我们也会经常遇到这样的问题,如何保证原来的接口不变

HTML的Quirks模式

什么是Quirks模式 Quirks,翻译成中文就是'怪癖',也就是奇怪的意思,这个东西的由来要从上古时期说起了...当初web的世界只有两个巨人,一个是微软的IE,另一个是网景的Navigator.双方厮杀了好几年,谁都不让着谁.并且为了将各自的阵营与对方区别开,开始针对对方搞差异化,使得开发者不得不针对两种浏览器平台做两个网页.大地看到了这一切的不公,在混沌之中创造了w3c联盟,而w3c的使命就是摧毁IE和Navigator之间的壁垒,使得两个平台的代码可以通用.于是乎在w3c强大的淫威之下

IE7/8当文本模式为杂项&quot;Quirks&quot; 导致JSP页面变样的问题

出现该问题的可能原因: 1. jsp页面头部编码的问题.如: <%@ page language="java" contentType="text/html; charset=UTF-8"%> 该问题的解决: 1. jsp页面头部编码的问题,解决方法: 把 <%@ page language="java" contentType="text/html; charset=UTF-8"%> 改为 <%

浏览器兼容性问题之渲染模式——1

兼容性问题 目前市面上流行的浏览器有多种,这些浏览器在处理一个相同的页面时,表现或行为有时会有差异.这种差异可能很小,甚至不会被注意到:也可能很大,甚至造成在某个浏览器下无法正常浏览.我们把引起这些差异的问题统称为“浏览器兼容性问题”. 浏览器的内核 各品牌浏览器的内核是不同的,不同的内核处理同一段代码的时候思路不同.因此可以说,浏览器间内核的差异是产生兼容性问题的根本原因. “内核”也称为“引擎”.常见的浏览器及其渲染引擎(又称排版引擎).脚本引擎的列表如下: Browser Name Lay

开发网站时解决360浏览器的兼容性问题,兼容模式打不开,让网页默认为极速模式打开

360浏览器打开网页默认是兼容模式,导致有些网页打不开, 可以在网页头部加上代码,默认改为为极速模式打开,就正常了: <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE10" />

jsp页面在IE8下文本模式自动为“杂项(Quirks)”导致页面显示错位

最近在修改网站的响应式的页面时,由于都是套样式页面,修改过程都是粘贴复制,导致了一些细节问题在IE8下暴露出来: 遇到的问题就是在在Chrome,火狐页面都正常,唯独在IE8下页面样式显示乱样了,但是本地就显示正常,Tomcat缓存也清楚了,再加上自己也是个小白,周末平静了一天半终于找到问题的源头了,其实解决办法也很简单,如图: 我最初是将小脚本写在<!DOCTYPE html>文档都上方的,但是在IE8浏览文本模式默认就编程了“Quirks”模式,显示不正常,后来改成了写在文档头下方就可以正