文档章节

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

MLeo
 MLeo
发布于 2013/01/19 23:32
字数 793
阅读 90
收藏 0

由于现在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 节(可能为英文网页))中。

<p>例如下面正确的例子:</p> <!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" />

最后我们看一下书写方式测试


本文转载自:

共有 人打赏支持
MLeo
粉丝 9
博文 46
码字总数 6067
作品 0
普陀
程序员
X-UA-Compatible兼容模式

如何理解 IE 的文档兼容模式(X-UA-Compatible)? IE 浏览器支持多种文档兼容模式,得以因此改变页面的渲染效果。 IE9 模式支持全范围的既定行业标准,包括 HTML5(草案), W3C CSS Level 3...

HTCKF
2015/05/10
0
0
XML文件的DOCTYPE定义

DOCTYPE的常用声明:按照 HTML 4.01 XHTML 1.0 XHTML 1.1 列表如下,错误的DOCTYPE HTML PUBLIC反而会导致页面解析错误。 HTML 4.01规范分为:Strict, Transitional, Frameset <!DOCTYPE HT...

SeanCai
2010/09/15
0
0
IE兼容性之杂项(Quirks)模式

此文转载,记录下遇到的问题,暂时没有仔细考究。 IE=EmulateIE7 标签的作用 对于 Web 开发人员来说,文本兼容性是一个要考虑的重要问题。Windows Internet Explorer 8 引入了文本兼容性模式...

Rella蕾拉
2015/04/08
0
0
如何定义和建立架构?

在牛津高阶词典(第7版)中,架构(architecture)一词的解释是:the design an structure of a computer system。这个解释实际上已经描述了架构的本质:架构是关于怎么做(构成系统)的,而...

zting科技
2017/01/12
0
0
ie7文档模式下页面显示问题

前端开发中,发现 未知原因 这样结构的导航栏,仅在ie7下(ie6我没管)“未知原因”几个字会变得不完整,在head部分强制使用ie8文档模式问题得到解决,但是其他浏览器的兼容模式应该是不识别...

Nekron131
2013/02/23
1K
0

没有更多内容

加载失败,请刷新页面

加载更多

维护“修理权”,苹果使用专有软件工具来修复MacBook Pro和iMac Pro

根据上月发给苹果授权服务提供商的一份文件,苹果公司正在使用新的专有软件诊断工具来修复MacBook Pros和iMac Pros,如果不用专有软件工具来修复关键部件,将会导致“系统失效和修复不完整”...

linuxCool
7分钟前
0
0
cacti监控安装

cacti是用PHP实现的一个软件,它用snmp服务获取数据,然后用rrdtool存储和更新数据,并生成图表展示。比较适合用于交换机、路由器的网络监控,插件众多,可图示化显示网络状况。 cacti官方推...

hiwill
37分钟前
1
0
shell特殊符号、cut、sort、uniq、wc、tee、tr、split命令

10月15日任务 8.10 shell特殊符号cut命令 8.11 sort_wc_uniq命令 8.12 tee_tr_split命令 8.13 shell特殊符号下 cut 命令 cut作用:截取字符串 用法如下:cat /etc/passwd |head -2 |cut -d ...

hhpuppy
今天
1
0
Springboot实现filter拦截token验证和跨域

背景 web验证授权合法的一般分为下面几种 1使用session作为验证合法用户访问的验证方式 使用自己实现的token 使用OCA标准 在使用API接口授权验证时,token是自定义的方式实现起来不需要引入其...

funnymin
今天
3
0
linux使用ntfs-3g操作ntfs格式硬盘

Linux内核目前只支持对微软NTFS文件系统的读取。 NTFS-3G 是微软 NTFS 文件系统的一个开源实现,同时支持读和写。NTFS-3G 开发者使用 FUSE 文件系统来辅助开发,同时对可移植性有益。 安装 ...

linuxprobe16
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部