1. X-UA-Compatible 存在的意义: 指定 IE 浏览器 解析网页时 使用哪个版本 (文档模式)
指定 IE 浏览器 解析网页时 使用哪个版本: 限定 使用的 IE 浏览器版本: IE 8 版本 及以上版本: X-UA-Compatible 属性值 是 IE 浏览器在 IE 8 版本开始 提供的一个特性 针对 IE 8 以上浏览器的一个属性,IE 8以下版本 无法识别。就是说 IE 8 以上浏览器 遇到这个属性,才会执行content 的描述.在 IE7、IE6中无效: 因为 X-UA-Compatible属性值 是 IE8 才开始支持的 大小写: 不敏感。 指定 (IE 浏览器) 解析时的 文档模式: 允许开发者 通过设置 meta 标签 ,来指定 IE 浏览器在 解析网页时 使用的文档模式,即 浏览器的哪个版本。 IE 浏览器 版本模拟: 即, 这个标签 可以实现 IE 浏览器 版本模拟。 向下兼容 / 只模拟 更低版本: 通过 X-UA-Compatible属性值, 只能模拟 比当前版本 更低的版本,并不能 模拟高版本。 示例1: 在 高版本 浏览器中, 强制用 浏览器低版本 渲染 在 IE8 刚推出的时候,很多网页 由于重构的问题,无法适应 较高级的浏览器,所以使用 X-UA-Compatible 标签 强制 IE8 采用 低版本方式渲染。比如, 为了避免制作出的页面 在IE8 下面出现错误,建议直接将 IE8 使用IE7 进行渲染 这样,开发者 无需考虑 网页是否兼容 IE8 浏览器,只要确保 网页在 IE7下的 正常显示就可以了 <meta http-equiv="X-UA-Compatible" content="IE=7" /> IE 浏览器的 文档模式 IE=5 : Quirks Mode (美 /kwɜːrk/,怪异 模式) IE6 和 IE6 以下,只有一个模式,叫“Quirks Mode”。等同于 模拟 IE6 即可,因为 IE5 是比 IE6 更加老旧的浏览器,基本上 没有人在用了. IE=7 : IE7 modeIE=8 : IE8 modeIE=9 : IE9 modeIE=10 : IE10 modeIE=11 : IE11 mode IE7 及以上版本, 都有一个 同名的文档模式2. X-UA-Compatible 的 使用示例
示例1: 强制浏览器 按照特定的 版本标准 进行渲染,但不支持 IE7及以下版本。<meta http-equiv="X-UA-Compatible" content="IE=11,IE=10,IE=9,IE=8"> 12 示例2:强制 IE8浏览器, 使用IE7 进行渲染
<meta http-equiv="X-UA-Compatible" content="IE=7" /> 1 示例3: (不建议 使用的语法) 指定 某个 IE版本的文档模式,但也允许例外。 在 IE 版本号 前面加上 Emulate ,代表, 如果网页开头 有 <!DOCTYPE>标记 就使用该 IE版本的标准文档模式否则使用 怪异模式(即等同于 IE=IE5),即,模拟 IE6
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/> 1
浏览器 模拟版本选择
如果网页开头 带有 <!DOCTYPE>标记,则模拟 IE7, 等同于: <meta http-equiv="X-UA-Compatible" content="IE=IE7"/> 如果网页开头 没有 <!DOCTYPE> 标记,则模拟IE6, 等同于: <meta http-equiv="X-UA-Compatible" content="IE=IE5"/>注意: 不建议使用 这个语法。
示例4: 总是使用 最新版本 文档模式,不准备兼容 所有 旧版 IE<meta http-equiv="X-UA-Compatible" content="IE=edge"/> 1
MDN 网站 使用的 就是这个模式,紧跟在 字符编码的后面,排在 第二个子元素的位置
就是 当前的 浏览器版本: 如, 用 IE8 访问, 就是 IE8 文档模式,用 IE9 访问, 就是 IE9 模式,用 IE10 访问, 就是 IE10 模式,用 IE11 访问, 就是 IE11 模式。
任何 IE 版本 都以 当前版本 所支持的 最高级标准 模式渲染,避免 版本升级造成的影响。简单的说,就是什么版本 IE 就用什么版本的标准模式渲染。省略的影响:
注意:此声明 并不是多此一举,如果不使用 content="IE=Edge" 属性值,IE 浏览器 会根据网页内容 采用 兼容视图,可能 采用 更低版本。不准备兼容 所有 旧版 IE: 除非 不准备兼容 所有 旧版 IE,否则也不建议 使用这个语法。
示例5: ★ 目前 最佳的兼容模式 — 如果安装了 Google Chrome Frame (谷歌浏览器 內嵌框架), 则使用 谷歌浏览器 内核模式,否则使用 最新的 IE 模式。 针对 IE 6,7,8 等版本的 浏览器插件 Google Chrome Frame,可以让用户的浏览器外观 依然是 IE的菜单和界面,但用户在 浏览网页时,实际上使用的是 Google Chrome 谷歌浏览器 内核。 如果不指定ie=edge,仅指定chrome=1 时,当用户浏览器 没有 chrome 内核时,会弹出提示框,提醒用户 安装该内核。<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> 1 淘宝网,使用的 就是这个 IE 版本兼容模式,也是紧跟在 字符编码的后面,位于 第二个子元素的位置
示例6: 由于 IE11 以下版本 都已停止更新,无论是从代码工作量 还是从用户安全的角度来讲,我们都不应该 再兼容 IE11 以下版本。在这种情况下,推荐使用:
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> 1 浏览器升级 提示: 然后, 为 IE11 以下版本 添加 旧版 IE浏览器 升级提示,或跳转到 IE浏览器升级 提示页,在X-UA-Compatible 代码下添加:
<script>/*@cc_on window.location.href="http://support.dmeng.net/upgrade-your-browser.html?referrer="+encodeURIComponent(window.location.href); @*/ </script> 123' IE10 不支持 if IE 语句 但 @cc_on 是 IE10 及更旧版IE 特有的 条件编译语句,因此可以用来判断 是否除 IE11 的 其他IE版本。) 不兼容 旧版IE: 自 2016年1月12日起,Microsoft 不再为 IE 11 以下版本 提供相应支持和更新。 没有 浏览器安全更新,用户的电脑 可能易受 有害病毒、间谍软件和其他恶意软件的攻击,窃取或损害业务 数据和信息。建议为网站添加 旧版IE升级提示,不再兼容旧版IE!
3. 双核浏览器 兼容思路 (搭配 meta 标签)
国产浏览器 大多带有: Chromium 内核和IE内核 自动选择内核: 在用户访问网页时 , 双核浏览器 根据网页内容 自动选择内核。通过 meta 标签 选择内核: 不过,双核浏览器 也提供了类似 X-UA-Compatible 特性的 meta 标签,允许 网页开发者通过 标签 选择内核。 ① 使用 Chromium 内核(极速模式) <meta name="renderer" content="webkit"/>(最常用) ② 使用 IE 8/9/10/11 内核(IE 标准模式,部分支持 HTML5) <meta name="renderer" content="ie-stand"/> ③ 使用 IE 6/7 内核(IE 兼容模式,不支持 HTML5) <meta name="renderer" content="ie-comp"/> 示例2: 如果网站在 IE 浏览器 效果更好,可以要求其 使用 IE标准内核渲染。<meta name="renderer" content="ie-stand"/> 12