HTML Meta中添加X-UA-Compatible和IE=Edge,chrome=1有什么作用?
主题 HTML

X-UA-Compatible是自从IE8新加的一个设置,对于IE8以下的浏览器是不识别的。 通过在meta中设置X-UA-Compatible的值,可以指定网页的兼容性模式设置。

在网页中指定的模式优先权高于服务器中(通过HTTP Header)所指定的模式。 兼容性模式设置优先级:

meta tag > http header

meta tag > http header

常用的例子:

<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="IE=edge">  
#以上代码告诉IE浏览器,IE8/9及以后的版本都会以最高版本IE来渲染页面。  
<meta http-equiv="X-UA-Compatible" content="IE=7,IE=9">  
<meta http-equiv="X-UA-Compatible" content="IE=7,9">  
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
#以上代码IE=edge告诉IE使用最新的引擎渲染网页,chrome=1则可以激活Chrome Frame.

<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 = "IE=edge" >

#以上代码告诉IE浏览器,IE8/9及以后的版本都会以最高版本IE来渲染页面。

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

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

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

# 以上代码IE = edge告诉IE使用最新的引擎渲染网页,chrome = 1则可以激活Chrome Frame .

Google Chrome Frame 百科

“IE=Edge,chrome=1″这样简单快捷,但是弊端是代码将无法通过W3C验证。其实这并不是问题,毕竟标准只是标准,如果只有这一个“错误”完全不会有任何不良的影响。

IE文档兼容性模式所有可能的值:

Emulate IE8 mode #指示IE使用<!DOCTYPE>指令来决定如何编译内容。Standards mode指令会显示成IE8 Standards mode而quirks mode会显示成IE5 mode。不同于IE8 mode,Emulate IE8 mode重视<!DOCTYPE>指令。
Emulate IE7 mode #指示IE使用<!DOCTYPE>指令来决定如何编译内容。Standards mode指令会显示成IE7 Standards mode而quirks mode会显示成IE5 mode。不同于IE7 mode,Emulate IE7 mode重视<!DOCTYPE>指令。对于许多网页来说这是最推荐的兼容性模式。
IE5 mode #编译内容如同IE7的quirks mode之显示状况,和IE5中显示的非常类似。
IE7 mode #编译内容如同IE7的standards mode之显示状况,无论网页是否含有<!DOCTYPE>指令。
IE8 mode #提供对业界标准的最高支持,包含 W3C Cascading Style Sheets Level 2.1 Specification和W3C Selectors API,并有限的支持 W3C Cascading Style Sheets Level 3 Specification (Working Draft)。
Edge mode #指示IE以目前可用的最高模式显示内容。当使用IE8时其等同于IE8 mode。若(假定)未来放出支持更高兼容性模式的IE,使用Edge mode的页面会使用该版本能支持的最高模式来显示内容。同样的那些页面在使用IE8浏览时仍会照常显示。

Emulate IE8 mode #指示IE使用<!DOCTYPE>指令来决定如何编译内容。Standards mode指令会显示成IE8 Standards mode而quirks mode会显示成IE5 mode。不同于IE8 mode,Emulate IE8 mode重视<!DOCTYPE>指令。

Emulate IE7 mode #指示IE使用<!DOCTYPE>指令来决定如何编译内容。Standards mode指令会显示成IE7 Standards mode而quirks mode会显示成IE5 mode。不同于IE7 mode,Emulate IE7 mode重视<!DOCTYPE>指令。对于许多网页来说这是最推荐的兼容性模式。

IE5 mode #编译内容如同IE7的quirks mode之显示状况,和IE5中显示的非常类似。

IE7 mode #编译内容如同IE7的standards mode之显示状况,无论网页是否含有<!DOCTYPE>指令。

IE8 mode #提供对业界标准的最高支持,包含 W3C Cascading Style Sheets Level 2.1 Specification和W3C Selectors API,并有限的支持 W3C Cascading Style Sheets Level 3 Specification (Working Draft)。

Edge mode #指示IE以目前可用的最高模式显示内容。当使用IE8时其等同于IE8 mode。若(假定)未来放出支持更高兼容性模式的IE,使用Edge mode的页面会使用该版本能支持的最高模式来显示内容。同样的那些页面在使用IE8浏览时仍会照常显示。

注意事项:

1,根据官网定义X-UA-compatible 标头不区分大小写;不过,它必须显示在网页中除 title 元素和其他 meta 元素以外的所有其他元素之前。如果不是的话,它不起作用

2,content的内容是IE=8,或者IE=edge等值,注意不是IE8或者直接写个edge的值,否则不起作用

如果对WEb服务器了解,可以直接配置一下VirtualHost: Apache:

<IfModule mod_setenvif.c>
  <IfModule mod_headers.c>
    BrowserMatch MSIE ie
    Header set X-UA-Compatible "IE=Edge" env=ie
    BrowserMatch chromeframe gcf
    Header append X-UA-Compatible "chrome=1" env=gcf
  </IfModule>
</IfModule>

< IfModule mod_setenvif .c >

< IfModule mod_headers .c >

BrowserMatch MSIE ie

Header set X - UA - Compatible "IE=Edge" env = ie

BrowserMatch chromeframe gcf

Header append X - UA - Compatible "chrome=1" env = gcf

< / IfModule >

< / IfModule >

Nginx: 详细参考: 例子

add_header "X-UA-Compatible" "IE=Edge,chrome=1";

add _ header "X-UA-Compatible" "IE=Edge,chrome=1" ;

参考:

http://lightcss.com/add-x-ua-compatible-meta-to-your-website/

http://desert3.iteye.com/blog/1638591

转载于:https://www.cnblogs.com/Rozdy/p/5242007.html

HTML Meta标签详解相关推荐

  1. W3C中meta标签详解

    2019独角兽企业重金招聘Python工程师标准>>> meta是html语言head区的一个辅助性标签.几乎所有的网页里,我们可以看到类似下面这段的html代码: <meta ...

  2. SEO技巧:Meta标签详解

    网页设计:Meta标签详解 您的个人网站即使做得再精彩,在"浩瀚如海"的网络空间中,也如一叶扁舟不易为人发现,如何推广 个人网站,人们首先想到的方法无外乎以下几种: ●在搜索引擎中 ...

  3. 网页设计:Meta标签详解

    网页设计:Meta标签详解 很多人忽视了HTML标签META的强大功效,一个好的META标签设计可以大大提高你的个人网站被搜索到的可能性,有兴趣吗,谁我来重新认识一下META标签吧! META标签是H ...

  4. meta标签详解(meta标签的作用)///////////////////////////转

    meta标签详解(meta标签的作用) 很多人却忽视了HTML标签META的强大功效,一个好的META标签设计可以大大提高你的个人网站被搜索到的可能性,有兴趣吗,谁我来重新认识一下META标签吧 您的 ...

  5. [Dreamweaver教程]Meta标签详解

    [Dreamweaver教程]Meta标签详解 原作者:indian 出处:5D多媒体 发表时间:2004-12-8 关键词: 版权信息:传统媒体及商业网站禁止擅自转载:个人网站转载需经作者同意,并注 ...

  6. http meta标签详解

    <meta> 元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词. meta标签作用 META标签是HTML标记HEAD区的一个关键标 ...

  7. Meta标签详解,太重要了

    您的个人网站即使做得再精彩,在"浩瀚如海"的网络空间中,也如一叶扁舟不易为人发现,如何推广 个人网站,人们首先想到的方法无外乎以下几种: ● 在搜索引擎中登录自己的个人网站 ● 在 ...

  8. html里meta标签,HTML中的meta标签详解

    meta标签是html标记语言head区一个非常有用的一个辅助性标签,在所有网页中都可以看到以下代码: Document 这些代码可有可无,其实利用好了,大有用途!会带带意想不到的效果,比如加入关键词 ...

  9. HTML的meta标签详解

    meta是html语言head区的一个辅助性标签.几乎所有的网页里,我们可以看到类似下面这段的html代码: <head>     <meta http-equiv="co ...

  10. 关于meta标签详解

    <meta charset="utf-8"> <!-- 设置文档字符编码 --> <meta http-equiv="x-ua-compat ...

最新文章

  1. SQL Server(五)——常用函数
  2. [Python]urllib库的简单应用-实现北航宿舍自动上网
  3. 中点和中值滤波的区别_滤波器基础知识简介
  4. easy-mock本地部署成功,访问报错:EADDRNOTAVAIL 0.0.0.0:7300 解决方案
  5. Kubernetes 网络概念及策略控制(叶磊)
  6. 计算机vfp考试题库二级,XYZ计算机等级考试题库系统(二级VFP)
  7. 智能公交市场的竞争与合作
  8. 安卓9.0系统新特性
  9. [转帖]VMware时间不准问题的解决方法
  10. chrome安装JSONview插件,即可在浏览中查看json文件
  11. 表情包生成引流源码 - Jason原创
  12. JAVA_HOME is not defined correctly
  13. Struggle_1 个人项目展示
  14. 汇编语言里 eax, ebx, ecx, edx, esi, edi, ebp, esp这些都是什么意思啊?
  15. 用python 编写一个简单的游戏
  16. qt linux不能读写u盘文件,Qt读取U盘文件内容
  17. vxe-input vue 日期选择组件带农历节日、小圆点提醒
  18. 基于canvas的图片剪裁工具
  19. 计算机组成原理 运算器实验
  20. Cuckoo Filter(布谷过滤器)

热门文章

  1. Python源码深度解析—float空闲对象缓存池
  2. 七种方法实现单例模式
  3. 考研数据结构--排序汇总(自用)
  4. [leetcode双周赛]5311. 将数字变成 0 的操作次数
  5. Codeforces Round #467 (Div. 1): A. Save Energy!(公式)
  6. C++ STL 堆(heap)的初始化及其正确使用
  7. C++ STL bitset类常用函数的使用
  8. docker安装常用组件(mysql,redis,postgres,rancher,Portainer,蝉道,JIRA,sonarqube,Confluence,pgadmin4,harbor)
  9. __main__.py:AttributeError: module 'labelme.utils' has no attribute 'draw_label'
  10. hls和modelsim进行联合仿真