【meta 标签的 http-equiv="X-UA-Compatible" 使用说明】


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 mode
    • IE=8 : IE8 mode
    • IE=9 : IE9 mode
    • IE=10 : IE10 mode
    • IE=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">

  • 示例2:强制 IE8浏览器, 使用IE7 进行渲染
<meta http-equiv="X-UA-Compatible" content="IE=7" /> 

  • 示例3: (不建议 使用的语法) 指定 某个 IE版本的文档模式,但也允许例外。
    • 在 IE 版本号 前面加上 Emulate ,代表,
      • 如果网页开头 有 <!DOCTYPE>标记 就使用该 IE版本的标准文档模式
      • 否则使用 怪异模式(即等同于 IE=IE5),即,模拟 IE6
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
  • 浏览器 模拟版本选择

    • 如果网页开头 带有 <!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"/>
  • 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"/>
  • 淘宝网,使用的 就是这个 IE 版本兼容模式,也是紧跟在 字符编码的后面,位于 第二个子元素的位置
    在这里插入图片描述

  • 示例6: 由于 IE11 以下版本 都已停止更新,无论是从代码工作量 还是从用户安全的角度来讲,我们都不应该 再兼容 IE11 以下版本。
  • 在这种情况下,推荐使用:
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=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>
  • 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"/>

  • 示例1: 如果网站采用 最新 CSS3/HTML5 编写,应该令其 使用 Chromium 内核也就是 Webkit 内核 渲染
  • ① 360 浏览器、QQ 浏览器 等 国产双核浏览器
    • <meta name="renderer" content="webkit"/>
      • 淘宝网 使用的,就是这个,位于 head 第三个子元素的位置
      • 在这里插入图片描述
  • ② 其他 双核浏览器
    • <meta name="force-rendering" content="webkit"/>
    • CSDN 网站,3种都使用了,位于head比较靠前的位置
    • 在这里插入图片描述

  • 示例2: 如果网站在 IE 浏览器 效果更好,可以要求其 使用 IE标准内核渲染。

<meta name="renderer" content="ie-stand"/>

结束语


  • 转载 请注明出处 ,Thanks♪(・ω・)ノ
    • 作者:Hey_Coder
    • 来源:CSDN
    • 原文:https://blog.csdn.net/VickyTsai/article/details/102819227
    • 版权声明:本文为博主原创文章,转载请附上博文链接!

在这里插入图片描述

  • 3
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值