`
xfcy2003
  • 浏览: 19938 次
  • 来自: ...
最近访客 更多访客>>
社区版块
存档分类
最新评论

使用X-UA-Compatible来设置IE8兼容模式

阅读更多

英文原文:http://msdn.microsoft.com/en-us/library/cc288325(VS.85).aspx

文件兼容性用于定义让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 兼容性之范例。

 

<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />--><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来编译所有网页。

 

<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />--><?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的网址列输入下列程式码会显示目前页面的文件模式。

<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />-->javascript:alert(document.documentMode);

 

documentMode功能会回传一个数值对应目前页面的文件兼容性模式,举例来说,若网页指定为支持IE8模式,documentMode便会回传值"8"。

在IE6引入的compatMode功能不支持在IE8引入的documentMode功能。目前使用compatMode建立的应用程式还能在IE8中作用,但它们必须更新为使用documentMode。

若你希望使用JavaScript判定一个文件的兼容性模式,引入下面范例的这段程式码可支持旧版本的IE。

 

<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />-->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。下面的范例显示该模式设定为其他值的状况。

 

<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />--><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。

<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />--><meta http-equiv="X-UA-Compatible" content="IE=5; IE=8" />

 

 

结论

兼容性对于网页设计师来说是非常重要的顾虑。虽然最好是可以建立一个完全不需依赖任何网页浏览器特性或功能的网站,有时候这是不可能实现的。文件兼容性模式便能将网页限制在某个特定版本的IE中。

使用X-UA-Compatible标头来指定你的页面支持的IE版本。使用document.documentMode判定页面的兼容性模式。

选择支持某个特定版本的IE,你可以确保你的页面在未来的浏览器版本中也能有显示的一致性。

分享到:
评论

相关推荐

    使用X-UA-Compatible来设置IE浏览器兼容模式

    当你引入一个增设的兼容性模式,此文章说明文件兼容性的必要性,列出现有版本IE能使用的文件兼容性模式并示范如何选择特定的兼容性模式。 了解文件兼容性的必要性 每个主要版本IE新增的功能都是为了让浏览器更容易...

    meta http-equiv=”X-UA-Compatible” content=”IE=7″ 意思是将IE8用IE7进行渲染

    `&lt;meta http-equiv="X-UA-Compatible" content="IE=7"&gt;` 这一行代码是针对Internet Explorer 8(IE8)浏览器的一个特定设置,它的作用是强制IE8以Internet Explorer 7(IE7)的标准模式来渲染网页内容。在IE8之前,...

    关于IE8兼容:X-UA-Compatible属性的解释

    meta http-equiv=”X-UA-Compatible” content=”IE=9; IE=8; IE=7; IE=EDGE” /&gt;1、这个到底是什么意思? 2、一些示例使用”,”分离IE的版本,而一些使用”;“,哪个正确? 3、我想知道IE=9; IE=8; IE=7; IE=...

    ua-compatible:在快速中间件中设置X-UA-Compatible标头

    在快速中间件中设置X-UA-Compatible标头。 强制IE使用最新的渲染引擎,如果已安装,默认为chrome-frame 安装 npm install ua-compatible --save 用法 var express = require('express') var app = express() var ...

    x-ua-compatible content=”IE=7, IE=9″意思理解

    在给定的标题和描述中,我们讨论的是如何设置 `x-ua-compatible` 以使 IE8 使用 IE7 模式渲染,同时允许 IE9 使用其自身的 IE9 模式。 `x-ua-compatible` 的 `content` 属性值决定了 IE 应该使用哪种兼容性模式。在...

    一行代码解决各种IE兼容问题,IE6,IE7,IE8,IE9,IE10

    4.强制IE8使用IE6或IE5模式来解析 &lt;meta http-equiv=“X-UA-Compatible” content=“IE=6″&gt;&lt;!– IE6 mode –&gt; &lt;meta http-equiv=“X-UA-Compatible” content=“IE=5″&gt;&lt;!– IE5 mode –&gt; 5.如果一个特定版本...

    IE8浏览器如何确定文档模式.docx

    IE8 浏览器如何确定文档模式是指 IE8 浏览器如何根据文档类型、X-UA-Compatible meta 标签和头部、开发人员工具和兼容性视图设置来确定网站的渲染模式的过程。 文档类型(doctype)是 HTML 文档的开头部分,用于...

    部署网站时为了兼容IEB在IIS中的配置兼容模式

    另一种常见的设置是`X-UA-Compatible: IE=edge`,这会告诉IE使用其当前版本中最先进的渲染模式。这对于希望利用最新HTML和CSS特性的网站来说非常有用,但可能会导致在旧版本IE上的兼容性问题。 #### IE=8、IE=9、IE...

    解决各种IE兼容问题_IE6_IE7_IE8_IE9_IE10

    总之,解决IE兼容问题的方法主要包括使用`X-UA-Compatible`标签指定渲染模式、利用服务器端配置以及引入JavaScript库。开发者可以根据项目需求选择适合的策略,以确保网站在不同版本的IE浏览器中都能正常工作。不过...

    IE7与IE8的兼容性 配置文档

    为了解决IE7与IE8之间的兼容性问题,Microsoft引入了一个名为`X-UA-Compatible`的HTTP头字段,允许开发者指定IE应该使用哪种渲染模式来显示页面。这一字段可以通过服务器端设置,也可以通过HTML元数据插入到页面中。...

    IE8 指定不同的页面渲染模式

    在探讨IE8指定不同的页面渲染模式这一主题时,我们深入解析了如何通过X-UA-Compatible元信息标记来控制Internet Explorer 8(以下简称IE8)在不同渲染模式下的表现,以实现跨浏览器兼容性优化。以下是对标题、描述...

    content=”IE=7, IE=9″意思理解

    为了解决这个问题,可以在网站头部添加`&lt;meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"&gt;`来强制IE8使用IE7的标准模式。而`&lt;meta http-equiv="X-UA-Compatible" content="IE=7, IE=9"&gt;`则进一步扩展了...

    ie8自动设置 兼容性代码

    ### IE8自动设置兼容性代码详解 随着网络技术的不断进步与互联网标准的持续演进,Web开发者面临着一个挑战:如何确保网站在不同版本的浏览器中保持一致的外观与功能。尤其是在Internet Explorer(IE)系列浏览器中...

    一句代码解决IE8兼容问题.docx

    保存并应用这个配置后,IIS会自动为所有请求添加`X-UA-Compatible`响应头,使IE8始终处于IE7兼容模式。 方法三:使用IIS管理员工具进行设置。如果你不熟悉XML配置或觉得手动编辑`web.config`麻烦,可以通过IIS管理...

    IIS启用兼容模式配置

    - `X-UA-Compatible`响应头用于指示IE浏览器应该使用哪个版本的IE渲染页面。 - 在本例中,我们设置了`IE=EmulateIE7`,这意味着IE将模拟IE7的行为来渲染当前页面。 3. 输入完成后,点击“确定”按钮保存设置。 **...

    一行代码解决各种IE兼容问题(IE6-IE10)

    x-ua-compatible 用来指定IE浏览器解析编译页面的model x-ua-compatible 头标签大小写不敏感,必须用在 head 中,必须在除 title 外的其他 meta 之前使用。 1、使用一行代码来指定浏览器使用特定的文档模式。 &lt;...

    ie6_ie7_ie8_ff(火狐)浏览器兼容性

    为了使IE8能够以IE7或IE8的标准模式渲染页面,可以使用X-UA-Compatible元标签: ```html &lt;meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"&gt; ``` 这将确保IE8以最高标准模式渲染页面,接近现代...

Global site tag (gtag.js) - Google Analytics