深入剖析IE8文件兼容性问题

开发 前端
IE8文件兼容性用于定义让IE如何编译你的网页。本文向大家解释一下IE8文件兼容性,如何指定你网站的IE8文件兼容性模式以及如何判断一个网页该使用的文件模式。

本文向大家描述一下IE8样式兼容性适应方法,为了帮助确保你的网页在所有未来的IE版本都有一致的外观,IE8引入了IE8文件兼容性。在IE6中引入一个增设的兼容性模式,IE8文件兼容性使你能够在IE呈现你的网页时选择特定编译模式。

IE8样式兼容性适应方法

IE8文件兼容性用于定义让IE如何编译你的网页。本文向大家解释一下IE8文件兼容性,如何指定你网站的IE8文件兼容性模式以及如何判断一个网页该使用的文件模式。

前言

为了帮助确保你的网页在所有未来的IE版本都有一致的外观,IE8引入了IE8文件兼容性。在IE6中引入一个增设的兼容性模式,IE8文件兼容性使你能够在IE呈现你的网页时选择特定编译模式。

新的IE为了确保网页在未来的版本中都有一支的外观,IE8引入了IE8文件兼容性。当你引入一个增设的兼容性模式,此文章说明IE8文件兼容性的必要性,列出现有版本IE能使用的IE8文件兼容性模式并示范如何选择特定的兼容性模式。

了解IE8文件兼容性的必要性

每个主要版本IE新增的功能都是为了让浏览器更容易使用、增加安全性及更支持业界标准。以这些作为IE的特色,其中一个风险就是旧版本网站无法正确的显示。

为了将这个风险降到***,IE6允许网页开发人员选择IE编译和显示他们网页的方式。"Quirksmode"为预设,这会使页面以旧版本浏览器的视点显示,"Standardsmode"(也称为"strictmode")特点是支持业界标准最为完善。然而要利用这个增强的支持功能,网页必须包含恰当的<!DOCTYPE>指令。

若一个网页没有包含<!DOCTYPE>指令,IE6会将它以quirksmode显示。若网页包含有效的<!DOCTYPE>指令但浏览器无法辨识,IE6会将它以IE6standardsmode显示。因为少数网站已经包含<!DOCTYPE>指令,兼容性模式的切换相当成功。这使网页开发人员能选择将他们的网页转移为standardsmode的***时机。

随著时间经过,更多网站开始使用standardsmode。它们也开始使用IE6的特性和功能来检测IE。举例来说,IE6不支持universalselector(即css之全局选择器*{}),一些网站便使用它来针对IE做特定的对应。

当IE7增加了对全域选择器的支持,那些依赖IE6特点的网站便无法侦测出这个新版本的浏览器。因此那些针对IE的特定对应无法应用于IE7,造成这些网站便无法如他们预期的显示。由于<!DOCTYPE>只支持两种兼容性模式,受到影响的网站拥有者被迫更新他们的网站使其能支持IE7。

IE8比之前的任何版本浏览器都更支持业界标准,因此针对旧版本浏览器设计的网页可能无法如预期般呈现。为了帮助减轻所有问题,IE8引入IE8文件兼容性的概念,使你能选择你的网页设计要对应的特定IE版本。IE8文件兼容性在IE8增加了一些新的模式,这些模式能告诉浏览器如何解析和编译一个网页。若你的网页无法在ie8正确的显示,你可以更新你的网站使它支持***的网页标准(优先选项)或在你的页面上新增一个meta元素用于告诉IE8如何依照旧版本浏览器编译你的页面。这能让你选择将你的网站更新支持IE8新特点的时机。

认识IE8文件兼容性模式

IE8支持几种IE8文件兼容性模式,它们具有不同的特性并影响内容显示的方式。

◆-EmulateIE8mode指示IE使用<!DOCTYPE>指令来决定如何编译内容。Standardsmode指令会显示成IE8Standardsmode而quirksmode会显示成IE5mode。不同于IE8mode,EmulateIE8mode重视<!DOCTYPE>指令。

◆-EmulateIE7mode指示IE使用<!DOCTYPE>指令来决定如何编译内容。Standardsmode指令会显示成IE7Standardsmode而quirksmode会显示成IE5mode。不同于IE7mode,EmulateIE7mode重视<!DOCTYPE>指令。对于许多网页来说这是最推荐的兼容性模式。
-IE5mode编译内容如同IE7的quirksmode之显示状况,和IE5中显示的非常类似。

◆-IE7mode编译内容如同IE7的standardsmode之显示状况,无论网页是否含有<!DOCTYPE>指令。

◆-IE8mode提供对业界标准的***支持,包含W3CCascadingStyleSheetsLevel2.1Specification和W3CSelectorsAPI,并有限的支持W3CCascadingStyleSheetsLevel3Specification(WorkingDraft)。

◆-Edgemode指示IE以目前可用的***模式显示内容。当使用IE8时其等同于IE8mode。若(假定)未来放出支持更高兼容性模式的IE,使用Edgemode的页面会使用该版本能支持的***模式来显示内容。同样的那些页面在使用IE8浏览时仍会照常显示。

由于edgemode使用该IE版本所能支持的***模式来显示所浏览的网页内容,建议仅使用于测试页及其他非商用页面。#p#

指定IE8文件兼容性模式

要为你的网页指定文件模式,需要在你的网页中使用meta元素放入X-UA-Compatiblehttp-equiv标头。以下是指定为EmulateIE7mode兼容性之范例。

  1. <html> 
  2. <head> 
  3. <!--MimicInternetExplorer7--> 
  4. <metahttp-equivmetahttp-equiv="X-UA-Compatible"content="IE=EmulateIE7"/> 
  5. <title>MyWebPage</title> 
  6. </head> 
  7. <body> 
  8. <p>Contentgoeshere.</p> 
  9. </body> 
  10. </html> 
  11.  

其内容随著指定的页面模式而更改,当要模拟IE7时,指定IE=EmulateIE7,指定IE=5,IE=7,或IE=8来选择其中一种兼容性模式。你也可以指定IE=edge来指示IE8使用它支持的***模式。

X-UA-compatible标头没有大小写之分。然而除了title元素及其他的meta元素之外,它必须出现在网页header节其它元素之前的位置,

设定网站服务器以指定预设兼容性模式

网站管理员可籍着为网站定义一个自订标头来为他们的网站预设一个特定的IE8文件兼容性模式。这个特定的方法取决于你的网站服务器。举例来说,下列的web.config文件使MicrosoftInternetInformationServices(IIS)能定义一个自订标头以自动使用IE7mode来编译所有网页。

  1. <?xmlversionxmlversion="1.0"encoding="utf-8"?> 
  2. <configuration> 
  3. <system.webServer> 
  4. <httpProtocol> 
  5. <customHeaders> 
  6. <clear/> 
  7. <addnameaddname="X-UA-Compatible"value="IE=EmulateIE7"/> 
  8. </customHeaders> 
  9. </httpProtocol> 
  10. </system.webServer> 
  11. </configuration> 
  12.  

若你已于网站服务器指定了一个预设的IE8文件兼容性模式,你可以在个别页面上指定不同的IE8文件兼容性模式来盖过它。在网页中指定的模式优先权高于服务器中所指定的模式。

判定IE8文件兼容性模式

要判定网页使用IE8浏览时的IE8文件兼容性模式,使用documentobject(文档对象)的documentMode功能。例如在IE8的网址列输入下列程式码会显示目前页面的文件模式。

  1. javascript:alert(document.documentMode);  
  2.  

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

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

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

  1. engine=null;  
  2. if(window.navigator.appName=="MicrosoftInternetExplorer")  
  3. {  
  4. //ThisisanIEbrowser.Whatmodeistheenginein?  
  5. if(document.documentMode)//IE8  
  6. engine=document.documentMode;  
  7. else//IE5-7  
  8. {  
  9. engine=5;//Assumequirksmodeunlessprovenotherwise  
  10. if(document.compatMode)  
  11. {  
  12. if(document.compatMode=="CSS1Compat")  
  13. engine=7;//standardsmode  
  14. }  
  15. }  
  16. //theenginevariablenowcontainsthedocumentcompatibilitymode.  
  17. }  
  18.  

 #p#认识内容属性值

内容属性值在接收到异于先前叙述的数值时是具有弹性的。这能使你对于IE如何显示你的网页更有操控性。举例来说,你可以设定内容属性值为IE=7.5。当你这样做的时候,IE尝试将这个值转换为versionvector并选择最接近的结果。在这个例子中,IE会将其设定为IE7mode。下面的范例显示该模式设定为其他值的状况。

  1. <metahttp-equivmetahttp-equiv="X-UA-Compatible"content="IE=4"><!--IE5mode--> 
  2. <metahttp-equivmetahttp-equiv="X-UA-Compatible"content="IE=7.5"><!--IE7mode--> 
  3. <metahttp-equivmetahttp-equiv="X-UA-Compatible"content="IE=100"><!--IE8mode--> 
  4. <metahttp-equivmetahttp-equiv="X-UA-Compatible"content="IE=a"><!--IE5mode--> 
  5.  
  6. <!--ThisheadermimicsInternetExplorer7anduses  
  7. <!DOCTYPE>todeterminehowtodisplaytheWebpage--> 
  8. <metahttp-equivmetahttp-equiv="X-UA-Compatible"content="IE=EmulateIE7"> 
  9.  

注意:前面的范例显示单独的内容值。实际上IE只会执行网页中***个X-UA-Compatible标头。

你也可以使用内容属性来指定复数的IE8文件兼容性模式,这能帮助确保你的网页在未来的浏览器版本都能一致的显示。欲设定复数的文件模式,请设定内容属性以判别你想使用的模式。使用分号来分开各个模式。

如果一个特定版本的IE支持所要求的兼容性模式多于一种,将採用列于标头内容属性中***的可用模式。你可以使用这个特性来排除特定的兼容性模式,虽然并不推荐这样做。举例来说,下列标头即会排除IE7mode。

  1. <metahttp-equivmetahttp-equiv="X-UA-Compatible"content="IE=5;IE=8"/> 
  2.  

结论

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

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

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

【编辑推荐】

  1. IE8文件兼容性问题详解
  2. JavaScript代码轻松实现DIV圆角
  3. 网页排版中IE6,IE7,Firefox浏览器兼容性写法
  4. CSS属性display:inline-block使用揭秘
  5. Firefox、IE7、IE6浏览器兼容问题概念解析

 

 

责任编辑:佚名 来源: csdn.net
相关推荐

2010-08-17 14:51:05

IE8兼容性

2010-09-15 10:14:19

IE7IE8兼容CSS

2010-09-15 10:32:54

IE8兼容

2010-08-17 16:50:30

JSIE6IE8

2010-08-17 15:33:28

CSS兼容IE7IE8

2010-08-17 14:22:51

IE8兼容性

2010-09-15 09:21:11

IEirefoxJavascript

2009-03-21 10:19:43

微软浏览器IE8

2010-08-23 09:23:48

IEFirefox兼容性

2010-09-15 11:26:05

IE火狐CSS兼容性

2010-10-09 15:22:25

IE7.JS

2010-08-20 14:27:23

IE火狐CSS

2010-08-18 09:24:09

IE6兼容性

2010-09-15 10:25:18

IE7IE8CSS兼容性

2010-09-16 13:33:47

IE6IE7IE8

2010-09-30 14:29:14

IE7.JS

2010-09-15 11:32:37

IE6IE7浏览器兼容性

2010-09-30 14:23:19

IE7 JS Libr

2010-08-17 15:58:01

IE8兼容性视图

2010-08-17 15:38:49

CSS兼容IE7IE8
点赞
收藏

51CTO技术栈公众号