芒果小站

  1. 全球最具业界良心的主机 - Linode

    毫无疑问,目前做得最好的主机供应商

    猛击这里查看

  2. 芒果小站目前使用的主机 - Linode

    客服响应快,随时退款,XEN 架构稳定

    猛击这里查看

  3. 最好的日本东京线路主机 - Linode

    可选弗里蒙特、达拉斯、亚特兰大、纽瓦克、伦敦、东京机房

    猛击这里查看

  • 1
  • 2
  • 3
切换到精简模式
16

再谈 X-UA-Compatible 兼容模式

作者 芒果/分类 代码/发布于 2012-07-09 18:40

如何理解 IE 的文档兼容模式(X-UA-Compatible)?

IE 浏览器支持多种文档兼容模式,得以因此改变页面的渲染效果。

IE9 模式支持全范围的既定行业标准,包括 HTML5(草案), W3C CSS Level 3 规范(草案), SVG 1.0 规范等

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

IE8 模式支持许多既定行业标准,W3C CSS Level 2.1 规范和 W3C Selectors API,有限支持 W3C CSS Level 3 规范(草案)和其他行业标准

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

IE7 模式强制浏览器按照 IE 7 标准模式渲染文档,忽略是否定义指令

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

Emulate IE9 模式告诉 IE 使用指令来决定如果渲染文档。标准模式下以 IE9 渲染,怪癖模式下以 IE5 渲染。和 IE9 模式不同的是,Emulate IE9 模式会考虑指令

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

Emulate IE8 模式告诉 IE 使用指令来决定如果渲染文档。标准模式下以 IE8 渲染,怪癖模式下以 IE5 渲染。和 IE8 模式不同的是,Emulate IE8 模式会考虑指令

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

Emulate IE7 模式告诉 IE 使用指令来决定如果渲染文档。标准模式下以 IE7 渲染,怪癖模式下以 IE5 渲染。和 IE7 模式不同的是,Emulate IE7 模式会考虑指令。对于大多数站点而言,这是首选的兼容模式

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

IE5 模式告诉 IE7 是否以怪癖模式渲染文档

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

Edge 模式告诉 IE 以最高级模式渲染文档,也就是任何 IE 版本都以当前版本所支持的最高级标准模式渲染,避免版本升级造成的影响。简单的说,就是什么版本 IE 就用什么版本的标准模式渲染

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

使用以下代码强制 IE 使用 Chrome Frame 渲染

<meta http-equiv="X-UA-Compatible" content="chrome=1">

提示 IE 用户安装 Google Frame
Google 官方提供了对 Google Frame 插件安装情况的检测,这里直接调用方法即可,如果检测到 IE 并未安装 Google Frame,则弹出对话框提示安装。

<script src="http://ajax.googleapis.com/ajax/libs/chrome-frame/1/CFInstall.min.js"></script><script>CFInstall.check();</script>

最佳的兼容模式方案,结合考虑以上两种:

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

参考资料:
Make IE awesome by turning it into Google Chrome
Defining Document Compatibility

版权所有,转载请注明出处。
转载自 <a href="http://mangguo.org/compatibility-mode-to-talk-about-x-ua-compatible/" title="再谈 X-UA-Compatible 兼容模式" rel="bookmark">再谈 X-UA-Compatible 兼容模式 | 芒果小站</a>
如果喜欢这篇文章,欢迎订阅芒果小站以获得最新内容。

已经有 16 条群众意见

  1. airoschou /2012-07-10 15:58

    不错,让我搞清楚许多设定 回应

    #1
  2. 屋面材料 /2012-07-11 14:22

    学习一下,谢谢分享 回应

    #2
  3. 流水线 /2012-07-11 16:00

    每次进博主文章就觉的广告很显眼,很多 回应

    #3
  4. 芒果流水线/2012-07-11 20:34

    没有广告的博客不是好博客 回应

    #4
  5. 珠宝网站 /2012-07-12 10:33

    X-UA-Compatible不知道所谓何物 回应

    #5
  6. airoschou芒果/2012-07-12 16:49

    下面留言地方显示和隐藏的东西 php里是怎么写的呀。。。 回应

    #6
  7. 呆哥哥漫画网 /2012-07-13 04:32

    路过~~~~学习了~ 回应

    #7
  8. 压瓦机 /2012-07-13 18:04

    内容简介大方 建议ad放在右边 别影响看文章 回应

    #8
  9. 骆恒安 /2012-07-14 09:39

    芒果哥,站长军团chrome插件怎么了? 回应

    #9
  10. 芒果骆恒安/2012-07-14 13:30

    服务器带宽不足,我给暂停了先。 回应

    #10
  11. 友豪 /2012-07-15 11:47

    你的这个博客主题用什么程序搭建的 回应

    #11
  12. 芒果友豪/2012-07-15 12:18

    WordPress 回应

    #12
  13. ?
    再谈 X-UA-Compatible 兼容模式 | wordpress主题下载|wordpress教程|wordpress 插件| wordpress主机 /2012-08-03 14:07

    […] IE awesome by turning it into Google Chrome Defining Document Compatibility © 2010 芒果小站 | 固定链接 | 12 条评论 | 标签 Chrome Frame, X-UA-Compatible 芒果小站No related posts. […] 回应

    #13
  14. ?
    再谈 X-UA-Compatible 兼容模式 | Coding Ant /2013-04-02 11:20

    […] Original Post […] 回应

    #14
  15. lyh /2013-04-27 16:11

    StylesheetTheme设置了一个主题之后 用X-UA-Compatible兼容模式就没有效果了,博主你有办法解决吗? 回应

    #15
  16. 芒果lyh/2013-04-27 16:27

    手工修改主题 header.php 文件咯。 回应

    #16

下面我简单说几句