如何定义IE的文档兼容模式

xinran001

浏览: 12939 次
性别:
来自: 上海

最近访客更多访客>>

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (11)

社区版块

存档分类

由于现在IE浏览器的多个版本共存，同时浏览器的升级也给我们的老项目带来了不可预测的风险。浏览器的兼容性问题开

始困扰我们的在线项目了。

还好，微软的给我们的解决方案是设置X-UA-Compatible。

X-UA-Compatible是自从IE8新加的一个设置，对于IE8以下的浏览器是不识别的。很多网站为了方便让页面在IE8/9下降

级成显示为IE7就使用了X-UA-Compatible 。IE8刚开始推出的时候跟IE7有不少不同，所以为了避免制作出的页面在IE8

下面出现错误，建议直接将IE8使用IE7进行渲染。这一做法过于方便，以至于现在太多网站声明了使用IE7引擎来解析页

面。

语法：

<meta http-equiv="X-UA-Compatible" content="IE=7" />

以上代码告诉IE浏览器，无论是否用DTD声明文档标准，IE8/9都会以IE7引擎来渲染页面。

<meta http-equiv="X-UA-Compatible" content="IE=8" />

以上代码告诉IE浏览器，IE8/9都会以IE8引擎来渲染页面。

<meta http-equiv="X-UA-Compatible" content="edge" />

以上代码告诉IE浏览器，Windows以最高版本的IE显示内容。

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

以上代码告诉IE浏览器，根据 <!DOCTYPE> 指令确定如何呈现内容。标准模式指令以Windows Internet Explorer 7

标准模式显示，而 Quirks 模式指令以 IE5 模式显示。与 IE7 模式不同，EmulateIE7 模式遵循 <!DOCTYPE> 指

令。对于多数网站来说，它是首选的兼容性模式。

注意X-UA-Compatible放置的位置，MSDN《定义文档兼容性》中是这样说的：The X-UA-compatible header is

not case sensitive; however, it must appear in the Web page’s header (the HEAD section)

before all other elements, except for the titleelement and other metaelements.

X-UA-compatible 标头不区分大小写；不过，它必须显示在网页中除 title元素和其他 meta 元素以外

的所有其他元素之前的标头（HEAD 节（可能为英文网页））中。

例如下面正确的例子：

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=IE7,IE9">
    <title></title>
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
    <link rel="icon" href="/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="...">
    <script type="text/javascript" src="..."></script>
    </head>
    <body>
    <!--网页主体-->
    </body>
    </html>

最杯具的用法：

<meta charset="utf-8">
    <title></title>
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
    <link rel="icon" href="/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="...">
    <meta http-equiv="X-UA-Compatible" content="IE=IE7,IE9">
    <script type="text/javascript" src="..."></script>

对于用上IE9/IE10的人，想跳过IE8，指定在IE7和IE9中渲染，得使用了MSDN文档推荐的语法：

<meta http-equiv="X-UA-Compatible" content="IE=7;IE=9" />

但是，以上兼容IE7/IE9的语法方式，会在IE8里会导致BUG，发现在IE8下并没有以IE7的文档模式来渲染页面。

正确的语法规则：

1.定义多种文档模式时，使用逗号（,），而非文档中提到的分号（;）。

<meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" />

/*或者是*/

  <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7,IE=EmulateIE9" />

2.或者以逗号升序连写的方式

<meta http-equiv="X-UA-Compatible" content="IE=7,9" />

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论