IE8兼容视图(IE7 mode)与独立IE7的区别详解

所属分类: 网页制作 / 应用技巧 阅读数: 1320
收藏 0 赞 0 分享

一. IE8兼容视图概述
为了解决新版浏览器不兼容旧网站的问题,IE8浏览器增加了一种叫做“兼容性视图”的功能,可以让网页以IE7的代码规范来显示,这样,就能够很好的解决大部分(但不是全部)由于代码标准不一致引起的网页问题。
二.“浏览器模式”和“文档模式”之间的区别
兼容性视图涉及两个重要的功能便是“浏览器模式browser mode”和“文档模式document mode”,在IE8中按F12键,打开“开发人员工具”,在菜单栏中可以看到“浏览器模式”和“文档模式”的切换菜单,其中可以选择切换到IE7/8等不同的网页模式。
那“浏览器模式”和“文档模式”之间有什么区别呢?
“浏览器模式”用于切换IE针对该网页的默认文档模式、对不同版本浏览器的条件备注解析、发送给网站服务器的用户代理(User-Agent)字符串的值。网站可以根据浏览器返回的不同用户代理字符串判断浏览器的版本和安装的功能,这样就可以向不同的浏览器返回不同的页面内容。
默认情况下,IE8的浏览器模式为IE8。用户可以通过单击地址栏旁边的兼容性视图按钮来手动切换到不同的浏览器模式。在IE8中,IE8兼容性视图会以IE7文档模式来显示网页,同时会向服务器发送IE7的用户代理字符串。
“文档模式”用于指定IE的页面排版引擎(Trident)以哪个版本的方式来解析并渲染网页代码。切换文档模式会导致网页被刷新,但不会更改用户代理字符串中的版本号,也不会从服务器重新下载网页。切换浏览器模式的同时,浏览器也会自动切换到相应的文档模式。
一般来说,两者都要设置为同样的版本,但是,如果不同又如何呢?或者说两者是否有优先级区别呢?
请看下面的msdn帖子:Just The Facts: Recap of Compatibility View
http://blogs.msdn.com/b/ie/archive/2009/02/16/just-the-facts-recap-of-compatibility-view.aspx
精华摘抄:
•We’ve evangelized use of the X-UA-Compatible tag to websites unable to update to support IE8’s Standards mode. The tag allows a web author to declare the exact standards mode behavior for which their website works best – IE8 Standards (again, the default when no header is present) or IE7 Standards. For example, using the value ‘IE=EmulateIE7’ causes IE8 to display a website “as IE7 would have”.
•We’ve provided end-user and corporate / IT mitigations to the website compatibility problem under the umbrella term ‘Compatibility View’. ‘Compatibility View’ allows IE8 users to have a great experience even when visiting websites that haven’t yet performed either of the above two steps. It also helps IT organizations preserve compatibility with the large number of line-of-business websites that are Internet Explorer 7 capable today.
•Compatibility View and the X-UA-Compatible tag are not equivalent. Compatibility View is something you do on the client. It affects three things: the User Agent string, the Version Vector (used in evaluation of conditional comments), and what mode DOCTYPEs that trigger Standards map to – IE8 Standards or IE7 Standards. The X-UA-Compatible <META> tag / header is something you use in page content / server-side and, when present, completely overrides Compatibility View settings on the client. It affects two things: the Version Vector and what mode DOCTYPEs that trigger Standards map to. It can’t affect the UA string as it’s already too late to change that – the client’s already made the GET request to the server (and it contains a UA string). What this means to developers is that if your site pivots on the User Agent string, adding just the X-UA-Compatible tag (to cause IE8 to display your site in IE7 Standards mode) won’t make your website compatible – you’ll also need to update your User Agent string detection logic as well.
总结,有两种方式可以使IE8兼容IE7模式,一是在服务器端,通过程序员控制修改网页的文档模式document mode,也就是通过Meta(X-UA-Compatible IE=EmulateIE7), 强制使页面变为兼容IE7的页面。
如下:

复制代码
代码如下:

<head runat="server">
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<title>cest</title>
</head>

如果不写这句,就会默认使用IE8了。
另一个就是在客户端,当网站还没来得及修改Meta时,用户如果装了IE8,发现无法正常显示,这时最后一招就是点击Compatibility View按钮了,它最终体现在User Agent上,也就是说点了兼容性视图按钮,再提交的Http请求头就被改写为 MSIE7.0,使客户端伪装成IE7来发送请求。
如下:
User-Agent: Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.0; Trident/5.0; SLCC1; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729; .NET4.0C; .NET4.0E)
按照该MSDN的说法,修改Meta(X-UA-Compatible IE=EmulateIE7)的优先级要高于点击Compatibility View,它可以覆盖掉Compatibility View的选择, 也就是说,一旦网站改版完成发布后,只要设置了Meta , 就可以使原来用户浏览器上设置的Compatibility View作废,从而自动适应新版本的IE8浏览器。
三.IE8兼容视图(IE7 mode)与独立IE7不完全相同
请看Technet.Microsoft的帖子:
What Is Compatibility View?
http://technet.microsoft.com/zh-cn/ff966533
Compatibility View is a feature of Windows Internet Explorer 8 that enables the browser to render a webpage nearly identically to the way that Windows Internet Explorer 7 would render it.
In Internet Explorer 8, Compatibility View changes how the browser interprets code that is written in CSS, HTML, and the Document Object Model (DOM) to try to match Internet Explorer 7. A site that a user views in Internet Explorer 8 Compatibility View is almost identical to a site that the user views in Internet Explorer 7. However, Compatibility View does not change how the browser interprets all code. For example, the changes in Internet Explorer 8 for how the browser handles ActiveX, the parser, AJAX, JavaScript, networking, and security might still cause compatibility issues. Compatibility View does not change these behaviors.
In an enterprise environment, some areas have lower risk for compatibility issues. For example, Intranet Zone websites use Compatibility View by default. Client web applications that render by using the Web Browser Control, or the WebOC (Internet Explorer rendering engine), also have a low risk for compatibility issues because Internet Explorer 8 defaults to a compatibility mode for the WebOC. However, the default configuration settings for Compatibility View might not ensure complete compatibility. To determine if a website or web application is compatible with Internet Explorer 8, you should test the website or web application.
For more information about the differences between Internet Explorer 8 Compatibility View and Internet Explorer 7, see the Site Compatibility and Internet Explorer 8 blog. For a list of what to check when you upgrade to Internet Explorer 8, see the Internet Explorer 8 Readiness Toolkit.
For more information about Compatibility View, see the Internet Explorer Team Blog.
请看MSDN的帖子:
1. Differences between IE8 Compatibility View and IE7
http://blogs.msdn.com/b/ie/archive/2009/03/12/site-compatibility-and-ie8.aspx
摘抄:
We strive to make Compatibility View behave as much like IE7 as possible, but we do make exceptions. Many of these exceptions enable improved security and accessibility features immediately, even for sites that have not yet migrated to IE8 Standards Mode.
2. What EXACTLY does Compatibility View do in IE8?
http://webmasters.stackexchange.com/questions/2219/what-exactly-does-compatibility-view-do-in-ie8
精华摘抄:
Compatibility View renders the page as if it was Internet Explorer 7 (including Javascript). There are a few differences between IE8 with CV and pure IE7 but essentially it is the same. If you really want the detail of what is going on then read Just The Facts: Recap of Compatibility View from the IE MSDN blog.
You can also force IE8 to use CV with this meta tag:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
If you are having problems, I'd suggest first checking you have a legitimate doctype in your HTML (the simplest one is <!DOCTYPE html> which forces standards mode). That will solve 90% of your problems, especially with IE6.
结论是:IE8兼容模式与独立的IE7是不同的,还是有些差异的,它并不是在IE8里简单包含了一个完整的IE7。
四.具体差异的细节
1. Cross Document Communication
Hacks enabling cross-domain, cross-document communication have been disabled for security reasons.
解决方案:Use Cross Document Messaging (XDM) to work around this change.
2. Extending the Event Object
IE exposes new properties for certain AJAX features such as Cross Document Messaging (XDM), even in Compatibility View. Adding custom properties to the Event object can conflict with these new properties, such as "source".
event.source = myObject; // Read-only in IE8
解决方案: Change the names of conflicting custom properties to avoid collision.
event.mySource = myObject;
3. Attribute Ordering
The ordering of attributes has changed, affecting the attributes collection as well as the values of innerHTML and outerHTML. Pages depending on a specific attribute ordering may break.
attr = elm.attributes[1]; // May differ in IE8
解决方案: Reference attributes by name as opposed to their position within the attributes collection.
attr = elm.attributes["id"];
4. Setting Unsupported CSS Values
Assigning CSS values that were unsupported in IE7 but are supported in IE8 Standards Mode will not generate exceptions in IE8 Compatibility View. Some sites use these exceptions to determine if a particular value for a CSS property is supported or not.

复制代码
代码如下:

Try
{
elm.style.display = "table-cell";
} catch(e)
{
// This executes in IE7,
// but not IE8, regardless of mode
}

解决方案: Short of version detection, this is a difficult issue to work around. If this behavior is essential to a page, updating the page to run in IE8 Standards Mode may be the best approach.

更多精彩内容其他人还在看

32个典型的以分栏/网格为基础的网站

如果你正在寻找网页分栏设计的灵感,这里收集了32个典型的以分栏/网格为基础的网站。它们显示了在网页设计中分栏/网格的重要性,无论对于信息量巨大的站点还是个人博客。 1.The New York Times 2.National Post 3.Guardian 4.Times
收藏 0 赞 0 分享

理论普及——用户体验

一、概念分析1:UE用户体验 英文叫做user experience,缩写为UE, 或者UX。 当指电子商务网站的时候也被称作顾客体验(CUSTOMER EXPERIENCE). 它是指用户访问一个网站或者使用一个产品时的全部体验。他们的印象和感觉,是否成功,是否享
收藏 0 赞 0 分享

分页案例和好的实践

结构和层次降低了复杂性并提高了可读性。你的文章或站点组织的越深入,用户就越容易理解你观点和得到你想传达的信息。在网页上,这点被通过多个方式做到。 在正文头条和列举被用做逻辑上独立的数据块来呈现信息。另一种解决方法是一种叫分页的机制,它在给定文章的单一部
收藏 0 赞 0 分享

建立用户体验

也许你刚刚来到一家公司,他们希望进行一些“可用性”工作。你可能是一名UI设计师,业务分析师,或前端开发人员,一名产品经理,或者负责用户体验部门的经理或副总。你知道,如果更好地了解使用产品/软件/网站的人,就可能开发出更好的产品/软件/网站。不管怎么样
收藏 0 赞 0 分享

网页图片快速显示的方法和技巧

1. Use .gifs rather than .jpgs. GIFs are smaller in size when compared to JPGs. 1.用.gifs格式保存图片,最好不要用.jpgs格式。因为前者的尺寸比后者小。 2.Use 'Height
收藏 0 赞 0 分享

推荐60种分页案例和好的实践

结构和层次降低了复杂性并提高了可读性。你的文章或站点组织的越深入,用户就越容易理解你观点和得到你想传达的信息。在网页上,这点被通过多个方式做到。 在正文头条和列举被用做逻辑上独立的数据块来呈现信息。另一种解决方法是一种叫分页的机制,它在给定文章的单一部
收藏 0 赞 0 分享

全面的网站评估方案

有时会被问到“看看XXX网站如何?”之类的问题。 谈到评估,通常都是指产品级的网站,如果模式很新,了解需要花一定时间。于是,很多人又问“那么你仅从UI/UE的角度看看呢?”首先我们得达成共识,一切花里胡哨都在为功能服务,如果功
收藏 0 赞 0 分享

网页的栅格设计思考

原文地址:http://andymao.com/andy/post/82.html 网页设计中的脏、乱、差,是我们在设计过程中常会遇到的问题。通常"脏"是由对色彩使用不当所产生的,而色彩使用不当产生的不好效果也分为:"花、灰",花哨、
收藏 0 赞 0 分享

设计理论设计中的层次感

原文:http://andymao.com/andy/post/80.html 这段时间我一直在说设计需要有层次感,这种层次感可能有很多类型,比如色彩的层次感,或是元素的层次感。当一个设计缺乏层次感的时候页面所表现出来的无非是两种可能,一种是单调,一种是花哨。在设计中我们常
收藏 0 赞 0 分享

网页心得:网页色彩的搭配

网页的色彩是树立网站形象的关键之一,色彩搭配却是网友们感到头疼的问题。网页的背景,文字,图标,边框,超链接...,应该采用什么样的色彩,应该搭配什么色彩才能最好的表达出预想的内涵呢?这里谈一些心得,希望对你有所启发。 首先我们先来了解一些色彩的基本知识:
收藏 0 赞 0 分享
查看更多