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

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

1
meta tag > http header

常用的例子:

 
1
2
3
4
5
6
7
8
9
10
<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">  
#将IE8和IE7按照IE7标准渲染,但是IE9还是按照IE9的标准渲染。它允许有不同的向后兼容水平。
<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文档兼容性模式所有可能的值:

 
1
2
3
4
5
6
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:

 
1
2
3
4
5
6
7
8
<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: 详细参考:例子

 
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

HTML Meta中添加X-UA-Compatible和IE=Edge,chrome=1有什么作用?的更多相关文章

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

    HTML Meta中添加X-UA-Compatible和IE=Edge,chrome=1有什么作用? X-UA-Compatible是自从IE8新加的一个设置,对于IE8以下的浏览器是不识别的. 通过 ...

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

    你好,这个属性主要是设置浏览器优先使用什么模式来渲染页面的.常见写法如下:<meta http-equiv="X-UA-Compatible" content="I ...

  3. vue 路由meta作用及在路由中添加props作用

    vue路由meta:有利于我们处理seo的东西,我们在html中加入meta标签,就是有利于处理seo的东西,搜索引擎 在路由中传参是通过/:id传参代码如下: import Login from ' ...

  4. Web前端开发最佳实践(4):在页面中添加必要的meta信息

    meta标签放置在HTML页面的head中,主要用于标识网站.其中基本上包含了网站的一些描述信息,例如,简介.作者等.这些信息有助于搜索引擎更准确地识别网页的内容,也有助于第三方工具抓取网站基本信息. ...

  5. 移动端网站如何开发(电脑端网站到手机端网站我们需要在html代码中添加哪个meta标签)

    移动端网站如何开发(电脑端网站到手机端网站我们需要在html代码中添加哪个meta标签) 一.总结 一句话总结: 添加viewport标签:meta name="viewport" ...

  6. 在html中添加缩放meta

    见代码(html) <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://w ...

  7. [Asp.net MVC]Asp.net MVC5系列——在模型中添加验证规则

    目录 概述 在模型中添加验证规则 自定义验证规则 伙伴类的使用 总结 系列文章 [Asp.net MVC]Asp.net MVC5系列——第一个项目 [Asp.net MVC]Asp.net MVC5 ...

  8. Web开发从零单排之二:在自制电子请帖中添加留言板功能,SAE+PHP+MySql

    在上一篇博客中介绍怎样在SAE平台搭建一个html5的电子请帖网站,收到很多反馈,也有很多人送上婚礼的祝福,十分感谢! web开发从零学起,记录自己学习过程,各种前端大神们可以绕道不要围观啦 大婚将至 ...

  9. SharePoint 2013 网站定义中添加页面布局

    今天在Visual Studio 2012中将页面布局打包到网站定义中. 新建Module “MasterPageGallary” 在Element中如下: <Elements xmlns=&q ...

随机推荐

  1. Visual Studio 2012 怪异的自动重启

    学生在做项目的过程中遇到这种问题: -------------- 用 Visual Studio 2012  开发W中eb 项目时,最近总是莫名其妙的自动重启. 后来试了一下,发现是只要在页面中输入 ...

  2. 我的代码观——关于ACM编程风格与librazy网友的对话

    序 在拙文 <高手看了,感觉惨不忍睹——关于“[ACM]杭电ACM题一直WA求高手看看代码”>中,我对ACMer们的一些代码“惯例”发表了我的看法, librazy网友在评论中给出了他的一 ...

  3. opencv载入,显示及保存图像

    1.声明一个表示图像的变量,在OpenCV2中,这个变量是cv::Mat类型,该类是用于保存图像以及其他矩阵数据的数据结构.默认情况下它们的尺寸为0. cv::Mat  image;       // ...

  4. SQL SERVER: 合并相关操作(Union,Except,Intersect) - 转载

    SQL Server 中对于结果集有几个处理,值得讲解一下 1. 并集(union,Union all) 这个很简单,是把两个结果集水平合并起来.例如 SELECT * FROM A UNION SE ...

  5. 利用Qt Assistant 定制帮助文档

    为了将Qt Assistant定制为自己应用程序的帮助文档浏览器.需要完成以下几步: 一.导入HTML格式的帮助文档 (1)首先,针对自己的应用程序创建HTML格式的帮助文档,请参见<Doxyg ...

  6. MySQL5.5半同步模式

    MySQL5.5支持半同步的复制模式,什么是半同步的? 1. MySQL5.5之前的Master-SLave的复制模式是异步的,这里的文档有详细的说明;

  7. Sublime Text使用教程【转】

    本文转载自:http://lucida.me/blog/sublime-text-complete-guide/ 摘要(Abstract) 本文系统全面的介绍了 Sublime Text,旨在成为最优 ...

  8. 161206、 Ionic、Angularjs、Cordova搭建Android开发环境

    1.jdk 环境变量配置 path:C:\Program Files\Java\jdk1.7.0_79\bin 2.Node.js 因为安装cordova时要用到node.js的npm 下载地址: h ...

  9. jquery+thinkphp实现跨域抓取数据的方法

    jquery的$.post发送数据到服务器后台,在由后台的PHP代码执行远程抓取,存到数据库ajax返回数据到前台,前台用JS接受数据并显示. //远程抓取获取数据$("#update_ac ...

  10. discuz搬家后报错SQL:SELECT value FROM [Table]vars WHERE name=’noteexists1′的解决办法

    基本上每个站长都会经历网站搬家,网站搬家中有时候就会遇到这次提到的这个错误数据库报错::SQL:SELECT value FROM [Table]vars WHERE name=\\\'noteexi ...