HTML Meta标签详解
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
HTML Meta标签详解的更多相关文章
- Meta标签详解(HTML JAVASCRIPT)
Meta标签详解,在网上转的,希望对大家有用 您的个人网站即使做得再精彩,在“浩瀚如海”的网络空间中,也如一叶扁舟不易为人发现,如何推广 个人网站,人们首先想到的方法无外乎以下几种: ● 在搜索引擎中 ...
- meta标签详解(meta标签的作用)///////////////////////////转
meta标签详解(meta标签的作用) 很多人却忽视了HTML标签META的强大功效,一个好的META标签设计可以大大提高你的个人网站被搜索到的可能性,有兴趣吗,谁我来重新认识一下META标签吧 ...
- Meta标签详解
[转载]Meta标签详解 Posted on 2005-05-17 20:00 二十四画生 阅读(54195) 评论(102) 编辑 收藏 Meta标签详解,在网上转的,希望对大家有用 引言 您的个 ...
- JSP页面中的Meta标签详解
Meta标签详解 相信大家在平时开发中最常接触的页面就是html和jsp了,可在这两个页面中有一个Meta标签你天天都会看见,可是你真的了解这个标签的一些其他用处吗?今天给大家介绍一些该标签的其他应用 ...
- 网页设计:Meta标签详解
很多人忽视了HTML标签META的强大功效,一个好的META标签设计可以大大提高你的个人网站被搜索到的可能性,有兴趣吗,谁我来重新认识一下META标签吧! META标签是HTML语言HEAD区的一个辅 ...
- HTMl中Meta标签详解以及meta property=og标签含义
meta是用来在HTML文档中模拟HTTP协议的响应头报文.META标签是HTML语言HEAD区的一个辅助性标签,它位于HTML文档头部的<HEAD>标记和<TITLE>标记之 ...
- Meta标签详解(转)
引言 您的个人网站即使做得再精彩,在“浩瀚如海”的网络空间中,也如一叶扁舟不易为人发现,如何推广个人网站,人们首先想到的方法无外乎以下几种: ● 在搜索引擎中登录自己的个人网站 ● 在知名网站加入你个 ...
- meta标签详解:源http://blog.csdn.net/kongjiea/article/details/17092413
一.大众机型常用meta标签name的设置 1.name之viewport <meta name="viewport" content=""> 说明 ...
- HTML中的Meta标签详解
emta标签的组成:meta标签分两大部分:HTTP-EQUIV和NAME变量. HTTP-EQUIV:HTTP-EQUIV类似于HTTP的头部协议,它回应给浏览器一些有用的信息,以帮助正确和精确地显 ...
- Html中meta标签详解--以前经常忽略的
W3School介绍:http://www.w3school.com.cn/html5/html5_meta.asp meta是用来在HTML文档中模拟HTTP协议的响应头报文. meta 标签的用处 ...
随机推荐
- background-clip
background-clip 用来将背景图片做适当的裁剪以适应实际需要. 语法: background-clip : border-box | padding-box | content-box | ...
- hbuilder的aptana php插件无法提示命名空间之外函数和对象的解决办法
- Java 字符编码归纳总结
String newStr = new String(oldStr.getBytes(), "UTF-8"); java中的String类是按照unicode进行编码的 ...
- android 开发 解码gif图片,获取每帧bitmap
环境:android 4.3 (注意对于android4.4版本解码出来不正确,除了第一帧正确外,其余的都是显示不同的地方) 通用版本见: android 开发对gif解码(适配android 4 ...
- 02.Redis主从集群的Sentinel配置
1.集群环境 1.Linux服务器列表 使用4台CentOS Linux服务器搭建环境,其IP地址如下: 192.168.110.100 192.168.110.101 192.168.110.102 ...
- Leetcode#56 Merge Intervals
原题地址 排序+合并,没啥好说的 第一次尝试C++的lambda表达式,有种写js的感觉,很神奇 c11就支持了lambda表达式,仔细想想,我学C++大概就是在09~10年,c11还没有发布,不得不 ...
- PHP 扩展库
表 6.1. PHP 扩展库 扩展库 说明 注解 php_bz2.dll bzip2 压缩函数库 无 php_calendar.dll 历法转换函数库 自 PHP 4.0.3 起内置 php_cpdf ...
- NDK: unable to watch local variables after using GCC4.8
the problem definitly apears after changing toolchain from gcc 4.6 to gcc 4.8. here's a solution wit ...
- UML 2.0(装载)
在世界上统一建模语言UML2.0是完全不同的维度.它在本质上更加复杂和广泛. 与UML1.5版本相比,文件的程度也增加了. UML2.0中还增加了新的功能,所以它的使用可以更广泛. UML2.0将正式 ...
- c3p0 --2
c3p0号称是java界最好的数据池. c3p0的配置方式分为三种,分别是 1.setters一个个地设置各个配置项 2.类路径下提供一个c3p0.properties文件 3.类路径下提供一个c3p ...