IE6、IE7、IE8、IE9兼容性问题解决办法
前言
为了帮助确保你的网页在所有未来的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 Specification和W3C 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 兼容性之范例。
<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来编译所有网页。
<?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的网址列输入下列程式码会显示目前页面的文件模式。
javascript:alert(document.documentMode);
documentMode功能会回传一个数值对应目前页面的文件兼容性模式,举例来说,若网页指定为支持IE8模式,documentMode便会回传值"8"。
在IE6引入的compatMode功能不支持在IE8引入的documentMode功能。目前使用compatMode建立的应用程式还能在IE8中作用,但它们必须更新为使用documentMode。
若你希望使用JavaScript判定一个文件的兼容性模式,引入下面范例的这段程式码可支持旧版本的IE。
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。下面的范例显示该模式设定为其他值的状况。
<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。
<meta http-equiv="X-UA-Compatible" content="IE=5; IE=8" />
结论
兼容性对于网页设计师来说是非常重要的顾虑。虽然最好是可以建立一个完全不需依赖任何网页浏览器特性或功能的网站,有时候这是不可能实现的。文件兼容性模式便能将网页限制在某个特定版本的IE中。
使用X-UA-Compatible标头来指定你的页面支持的IE版本。使用document.documentMode判定页面的兼容性模式。
选择支持某个特定版本的IE,你可以确保你的页面在未来的浏览器版本中也能有显示的一致性。
1.区别IE和非IE浏览器
background:blue; /*非IE 背景藍色*/
background:red \9; /*IE6、IE7、IE8背景紅色*/
background-color:blue\9\0; /* ie 9*/
}
2.区别IE6,IE7,IE8,FF
【示例】:
background:blue; /*Firefox 背景变蓝色*/
background-color:yellow\9\0; /* ie 9*/ /*IE9 背景变黄色*/
*background:black; /*IE7 背景变黑色*/
_background:orange; /*IE6 背景变橘色*/
}
【说明】:因为IE系列浏览器可读「\9」,而IE6和IE7可读「*」(米字号),另外IE6可辨识「_」(底线),因此可以依照顺序写下来,就 会让浏 览器正确的读取到自己看得懂得CSS语法,所以就可以有效区分IE各版本和非IE浏览器(像是Firefox、Opera、Google Chrome、Safari等)。
3.区别IE6、IE7、Firefox (方法 1)
【示例】:
background:blue; /*Firefox背景变蓝色*/
*background:black; /*IE7 背景变黑色*/
_background:orange; /*IE6 背景变橘色*/
}
【说明】:IE7和IE6可读「*」(米字号),IE6又可以读「_」(底线),但是IE7却无法读取「_」,至于Firefox(非IE浏览器) 则完全 无法辨识「*」和「_」,因此就可以透过这样的差异性来区分IE6、IE7、Firefox
4.区别IE6、IE7、Firefox (方法 2)
【示例】:
background:blue; /*Firefox 背景变蓝色*/
*background:green !important; /*IE7 背景变绿色*/
*background:orange; /*IE6 背景变橘色*/
}
【说明】:IE7可以辨识「*」和「!important」,但是IE6只可以辨识「*」,却无法辨识「!important」,至于 Firefox可以 读取「!important」但不能辨识「*」因此可以透过这样的差异来有效区隔IE6、IE7、Firefox。
5.区别IE7、Firefox
【示例】:
background:blue; /*Firefox 背景变蓝色*/
*background:green !important; /*IE7 背景变绿色*/
}
【说明】:因为Firefox可以辨识「!important」但却无法辨识「*」,而IE7则可以同时看懂「*」、「!important」,因 此可以 两个辨识符号来区隔IE7和Firefox。
6.区别IE6、IE7 (方法 1)
【示例】:
*background:black; /*IE7 背景变黑色*/
_background:orange; /*IE6 背景变橘色*/
}
【说明】:IE7和IE6都可以辨识「*」(米字号),但IE6可以辨识「_」(底线),IE7却无法辨识,透过IE7无法读取「_」的特性就能轻 鬆区隔 IE6和IE7之间的差异。
7.区别IE6、IE7 (方法 2)
【示例】:
background:black !important; /*IE7 背景变黑色*/
background:orange; /*IE6 背景变橘色*/
}
【说明】:因为IE7可读取「!important;」但IE6却不行,而CSS的读取步骤是从上到下,因此IE6读取时因无法辨识 「!important」而直接跳到下一行读取CSS,所以背景色会呈现橘色。
8.区别IE6、Firefox
【示例】:
background:black; /*Firefox 背景变黑色*/
_background:orange; /*IE6 背景变橘色*/
}
【说明】:因为IE6可以辨识「_」(底线),但是Firefox却不行,因此可以透过这样的差异来区隔Firefox和IE6,有效达成CSS hack。
9.区别IE8、IE9
一般来说,我们写的结构比较好的时候,IE8/9下是没区别的.所以可能很少人关注只有IE8或只有IE9才识别的css hack.
因为IE8及以下版本是不支持CSS3的,但是我们如果使用css3,在IE下IE9正常渲染,但我们又想让IE8及以下的浏览器实现同样的效果,且不希望使用css3pie或htc或条件注释等方法时,可能就会需要用到IE8和IE9的专属css hack了.
.test{ color:#09F\0; /* IE8/9 */ color:#09F\0/; /* IE8 only */ } :root .test { color:#963\9; } /* IE9 only */ /*或者下面的,但是下面的优先级小于上面的。Ps:老外的方法都是\0,根本没考虑Opera*/ @media all and (min-width:0){ .test{color:red\9; }/* IE9 only */ }
转自:
http://blog.csdn.net/zajin/article/details/7631284
http://ipmtea.net/css_ie_firefox/201010/30_379.html
相关推荐
使IE5,IE6,IE7,IE8兼容到IE9模式 <!–[if lt IE 9]> ”http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js”></script> <![endif]–> 解决PNG显示问题 只需将透明png图片命名为*-trans.png 需要注意...
另一种解决IE兼容性问题的方法是使用JavaScript库,如Google的ie7-js。这是一个JavaScript库,其目的是让旧版的IE(如IE5、IE6)的行为更接近符合Web标准的浏览器,支持更多的W3C标准,包括CSS2、CSS3选择器,并修复...
【IE6升级到IE9兼容性问题和操作手册】 在互联网技术不断发展的今天,老旧的浏览器版本如IE6已经无法满足现代网页的需求。因此,升级到更现代的版本,如IE9,是必要的。然而,这个升级过程并非一帆风顺,会涉及到...
### 如何解决IE兼容性问题 在Web开发领域,确保网站在不同版本的Internet Explorer(以下简称IE)浏览器中能够正常显示是一项重要的工作。由于IE浏览器的版本差异导致了许多兼容性问题,这使得开发者不得不采取一...
本文将深入探讨IE6到IE11的兼容性问题及其解决策略,旨在帮助开发者更顺利地应对这些挑战。 首先,我们来关注IE6的一些典型问题。IE6对于CSS的支持非常有限,例如不支持浮动元素的`clear:both`属性,不理解`min-...
本文将针对IE6, IE7, IE8中常见的兼容性问题进行深入探讨,并提供相应的解决方案。 #### 二、CSS兼容性问题及解决方案 ##### 2.1 div的垂直居中问题 **问题描述**:在某些情况下,开发者希望将一个元素在其父容器...
本文件“IE6-IE11兼容性问题列表及解决办法.rar”正是针对这些难题提供解决方案的资源。 1. **CSS兼容性问题**:IE6-IE11对CSS的支持程度不一,如浮动元素、盒模型、透明度、边距重叠等。例如,IE6不支持CSS3的新...
本文将深入探讨如何解决IE6、IE7、IE8下的样式兼容性问题,包括但不限于CSS hack技术、布局调整策略以及脚本修复方案。 #### 二、CSS Hack技术 **1. Conditional Comments与X-UA-Compatible** 为了区分不同的IE...
# IE6-IE9兼容性问题列表及解决办法 ## 概述 随着技术的发展,浏览器不断迭代更新,为了确保网站能在不同的浏览器版本下正常显示和运行,了解并解决兼容性问题是前端开发者的重要任务之一。从IE6到IE9,微软的...
IE6-IE11 兼容性问题列表及解决办法 作为一名 WEB 前端开发者,了解 IE 浏览器的兼容性问题是非常重要的。在 IE6 到 IE11 的版本更新中,存在许多的变化和改进,这些变化可能会影响到我们编写的前端代码的兼容性。...
标题 "IE7.JS解决IE兼容性问题方法" 指的是使用一个名为 "IE7.JS" 的脚本库来解决Internet Explorer浏览器的兼容性问题。IE7.JS是开源社区开发的一个JavaScript库,其目标是通过模拟缺失的功能和修复已知的错误,...
本文将深入探讨如何解决IE兼容性问题,尤其是针对IE8版本的优化策略。 一、理解IE的DOCTYPE及其影响 DOCTYPE声明在HTML文档的开头,用于告知浏览器应使用哪种HTML或XHTML规范来解析页面。IE浏览器在不同的DOCTYPE...
综上所述,CSS Hack技巧是解决跨浏览器兼容性问题的有效手段。通过理解各浏览器对特定符号的不同解析能力,开发者可以灵活调整样式,确保网站在不同环境中都能呈现出预期的效果。然而,随着现代浏览器的普及和旧版IE...
总的来说,处理IE兼容性问题是一项复杂的工作,涉及到JavaScript语法、DOM操作、CSS解析等多个方面。这个压缩包中的js文件可能是开发者解决这些难题的利器,通过引入和执行这些脚本,可以有效地提升网站在IE各版本上...
在探讨IE6、IE7、IE8对CSS和JavaScript支持的差异时,我们可以发现一系列显著的兼容性问题和解析规则的变化。以下是对这些差异的详细分析: 1. **JavaScript性能和垃圾收集**: - 在IE6中,JScript引擎在处理大量...
在网页设计领域,Internet Explorer(简称IE)的6、7、8版本曾是开发者们面临兼容性问题的主要挑战。这三款浏览器虽然在当时占据了一定的市场份额,但它们对CSS(层叠样式表)的支持程度并不理想,导致开发者需要...
### 浏览器兼容性问题解析:针对IE6、IE7与Firefox的样式处理 在Web开发中,浏览器兼容性始终是一项重要的考虑因素。不同浏览器对CSS的支持程度不一,尤其是对于早期版本的Internet Explorer(IE)如IE6、IE7,以及...