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

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

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

  1. meta tag > http header

常用的例子:

  1. <meta http-equiv="X-UA-Compatible" content="IE=7">
  2. #以上代码告诉IE浏览器,无论是否用DTD声明文档标准,IE8/9都会以IE7引擎来渲染页面。
  3. <meta http-equiv="X-UA-Compatible" content="IE=8">
  4. #以上代码告诉IE浏览器,IE8/9都会以IE8引擎来渲染页面。
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. #以上代码告诉IE浏览器,IE8/9及以后的版本都会以最高版本IE来渲染页面。
  7. <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9">
  8. <meta http-equiv="X-UA-Compatible" content="IE=7,9">
  9. <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
  10. #以上代码IE=edge告诉IE使用最新的引擎渲染网页,chrome=1则可以激活Chrome Frame.

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

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

  1. Emulate IE8 mode #指示IE使用<!DOCTYPE>指令来决定如何编译内容。Standards mode指令会显示成IE8 Standards mode而quirks mode会显示成IE5 mode。不同于IE8 mode,Emulate IE8 mode重视<!DOCTYPE>指令。
  2. Emulate IE7 mode #指示IE使用<!DOCTYPE>指令来决定如何编译内容。Standards mode指令会显示成IE7 Standards mode而quirks mode会显示成IE5 mode。不同于IE7 mode,Emulate IE7 mode重视<!DOCTYPE>指令。对于许多网页来说这是最推荐的兼容性模式。
  3. IE5 mode #编译内容如同IE7的quirks mode之显示状况,和IE5中显示的非常类似。
  4. IE7 mode #编译内容如同IE7的standards mode之显示状况,无论网页是否含有<!DOCTYPE>指令。
  5. IE8 mode #提供对业界标准的最高支持,包含 W3C Cascading Style Sheets Level 2.1 Specification和W3C Selectors API,并有限的支持 W3C Cascading Style Sheets Level 3 Specification (Working Draft)。
  6. 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:





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 mod_setenvif .c >

  1. < IfModule mod_headers .c >
  2. BrowserMatch MSIE ie
  3. Header set X - UA - Compatible "IE=Edge" env = ie
  4. BrowserMatch chromeframe gcf
  5. Header append X - UA - Compatible "chrome=1" env = gcf
  6. < / IfModule >
  7. < / IfModule >

参考:

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

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

引用:

http://www.tuicool.com/articles/ra6Fjuj

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

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

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

  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. AdaBoost算法分析与实现

    AdaBoost(自适应boosting,adaptive boosting)算法 算法优缺点: 优点:泛化错误率低,易编码,可用在绝大部分分类器上,无参数调整 缺点:对离群点敏感 适用数据类型:数值 ...

  2. NewBluePill源码学习

    NewBluePill的源码也看的差不多了,一直说等有时间了再写学习的一些心得,拖来拖去弄到现在了,时间不是等来的,慢慢开始吧. 0x00     初识硬件虚拟化 硬件虚拟化对大数人来讲还是比较陌生. ...

  3. 解决SVN更新代码是出现previous operation has not finished; run cleanup if it was interrupted这个错误

    解决方法:清空svn的队列 1.下载sqlite3.exe 2.找到你项目的.svn文件,查看是否存在wc.db   (查看.svn文件需要打开显示隐藏文件夹) 3.将sqlite3.exe放到.sv ...

  4. http协议和浏览器缓存问题

    HTTP是超文本传输协议. HTTP是一个应用层协议,由请求和响应构成,是一个标准的客户端服务器模型.HTTP是一个无状态的协议.

  5. CodeChef - QCHEF 分块

    题目链接:http://vjudge.net/problem/174774/origin 题意:给定一个长度为n的序列a[],序列的值不大于m,现在有k个询问,每个询问给定(l,r).让你求出max{ ...

  6. 简单的网络引导安装CentOS7

    实验室有几台电脑,里边装有windows,因为实验需求要给其装入CentOS7.但是这几个电脑无法用U盘引导系统的安装,虽然带有光驱,但是又不想麻烦去买碟片,所以便想到用网络引导系统的安装. 1. 软 ...

  7. ZeroMQ接口函数之 :zmq_z85_decode – 从一个用Z85算法生成的文本中解析出二进制密码

    ZeroMQ 官方地址 :http://api.zeromq.org/4-0:zmq_z85_decode zmq_z85_decode(3)         ØMQ Manual - ØMQ/4.1 ...

  8. trie字典树详解及应用

    原文链接    http://www.cnblogs.com/freewater/archive/2012/09/11/2680480.html Trie树详解及其应用   一.知识简介        ...

  9. java类,接口浅谈

    一般类,抽象类,接口的使用场景: 类;共同的特征和行为的抽取和封装 接口:标准,规范(功能的扩展)         需要对某个类进行功能的扩展,就让某个类实现这个接口,抽取出来称为接口   内部类: ...

  10. javascript 时间格式化

    添加扩展 //时间格式化扩展Date.prototype.format = function(format){ var o = { "M+" : this.getMonth()+1 ...