如何定义IE的文档兼容模式
2013-05-16 14:22
267 查看
转载自:http://blog.moocss.com/tutorials/html-css-tutorials/1703.html ;
由于现在IE浏览器的多个版本共存,同时浏览器的升级也给我们的老项目带来了不可预测的风险。浏览器的兼容性问题开始困扰我们的在线项目了。
还好,微软的给我们的解决方案是设置X-UA-Compatible。
X-UA-Compatible是自从IE8新加的一个设置,对于IE8以下的浏览器是不识别的。
很多网站为了方便让页面在IE8/9下降级成显示为IE7就使用了X-UA-Compatible 。
IE8刚开始推出的时候跟IE7有不少不同,所以为了避免制作出的页面在IE8下面出现错误,建议直接将IE8使用IE7进行渲染。这一做法过于方便,以至于现在太多网站声明了使用IE7引擎来解析页面。
以上代码告诉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 title element
and other metaelements.
X-UA-compatible 标头不区分大小写;不过,它必须显示在网页中除 title 元素和其他
meta 元素以外的所有其他元素之前的标头(HEAD 节(可能为英文网页))中。
被杯具的用法:
对于用上IE9/IE10的人,想跳过IE8,指定在IE7和IE9中渲染,得使用了MSDN文档推荐的语法:
<meta http-equiv="X-UA-Compatible" content="IE=7;IE=9" />
但是,以上兼容IE7/IE9的语法方式,会在IE8里会导致BUG,发现在IE8下并没有以IE7的文档模式来渲染页面。
由于现在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 title element
and other metaelements.
X-UA-compatible 标头不区分大小写;不过,它必须显示在网页中除 title 元素和其他
meta 元素以外的所有其他元素之前的标头(HEAD 节(可能为英文网页))中。
12345678910111213141516 | <p>例如下面正确的例子:</p><!DOCTYPE html><html><head> <meta charset="utf-8"> <metahttp-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> |
1234567 | <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> |
<meta http-equiv="X-UA-Compatible" content="IE=7;IE=9" />
但是,以上兼容IE7/IE9的语法方式,会在IE8里会导致BUG,发现在IE8下并没有以IE7的文档模式来渲染页面。
正确的语法规则:
1.定义多种文档模式时,使用逗号(,),而非文档中提到的分号(;) 。
123 | <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" />相关文章推荐
- 如何定义IE的文档兼容模式
- 定义IE的文档兼容模式
- 定义IE的文档兼容模式
- 如何理解 IE 的文档兼容模式
- IE文档兼容模式可以解决360浏览器…
- 在IE兼容模式下 提示JSON未定义
- IE兼容模式 下 JSON未定义
- 记一个IE浏览器兼容模式与IE文档模式不一致的问题
- ASP.NET浏览器定义文件及IE兼容模式
- telerik 控件 SCRIPT5007: 无法获取未定义或 null 引用的属性“documentElement” (IE 文档模式)
- 如何判断 IE 的真正版本(非兼容模式下的版本,IE8+)
- 如何让ExtJS 5在IE 11兼容模式中显示正确
- IE如何打开兼容模式
- ASP.NET浏览器定义文件及IE兼容模式
- IIS PHP Thinkphp 重定向 rewrite 设置默认header meta IE 兼容模式
- WebBrowser与IE的关系,如何设置WebBrowser工作在IE9模式下?
- IE9如何兼容IE8以及以下的浏览模式
- X-UA-Compatible IE 浏览器默认文档模式设置
- IE “浏览器模式”和“文档模式”的区别
- IE兼容模式文件上传所遇问题解决