兼容利器之X-UA-Compatible

文档兼容模式

不同浏览器之间经常产生各种奇异的现象,为了解决这些问题,使用以下方法,发现很多问题自动消失不见了

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
这是一个,文档兼容模式的定义。 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">

Google Chrome Frame

Google开发的一个Google Chrome Frame「Google Chrome 浏览器内嵌框架 – GCF」。使用GCF可以让用户的IE浏览器外观不变,但用户在浏览网页时实际上使用的是Chrome的内核,并且支持Windows XP及以上系统的IE6/7/8。

官方对其定义:

  • 可使用开放式网络技术(如 HTML5 canvas 标记)立即启动,甚至包括 Internet Explorer 6、7 或 8 尚不支持的技术。
  • 利用 JavaScript 性能增强功能,使应用程序速度更快,响应更灵敏。

w3.org的html5验证

然而,下一个问题又来了,在w3.org的html5验证工具下:

HTML5 Validator Error “Bad value X-UA-Compatible for attribute http-equiv on element meta

介个也好解决,针对三种主流服务器,我们都可以在服务器端配置http equiv规则:

1、apache服务器

确保 mod_headers 和 mod_setenvif 是available的,然后在httpd.conf「新版Apache的配置文件是 apache2.conf」或者在.htaccess中加入以下规则:

view sourceprint

1.<IfModule mod_setenvif.c>

2.<IfModule mod_headers.c>

3.BrowserMatch chromeframe gcf

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

5.</IfModule>

6.</IfModule>

2、Windows Server在IIS7或者更高版本的服务器

只需要修改web.config文件,添加如下信息即可:

view sourceprint

01.<configuration>

02.<system.webServer>

03.<httpProtocol>

04.<customHeaders>

05.<add name "X-UA-Compatible" value "chrome=1" />

06.</customHeaders>

07.</httpProtocol>

08.</system.webServer>

09.</configuration>

3、Nginx服务器

只需要找到ginx.conf并编辑,在server { }区域里(最好是闭合符前面起一行)添加下列代码即可:

view sourceprint

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

总结

  1. 如果支持Google Chrome Frame:GCF,则使用GCF渲染;
  2. 如果系统安装ie8或以上版本,则使用最高版本ie渲染;
  3. 否则,这个设定可以忽略。

极速模式

最近用360浏览器访问自己的网站,发现都是被优先选用兼容模式打开,这使得网站很难看。为了让360浏览器打开网站的时候优先试用极速模式,找了一下官方论坛,发现了解决方案。

在head标签中添加一行代码:

 <meta name="renderer" content="webkit|ie-comp|ie-stand">

content的取值为webkit,ie-comp,ie-stand之一,区分大小写,分别代表用webkit内核,IE兼容内核,IE标准内核。

若页面需默认用极速核,增加标签:<meta name="renderer" content="webkit">

若页面需默认用ie兼容内核,增加标签:<meta name="renderer" content="ie-comp">

若页面需默认用ie标准内核,增加标签:<meta name="renderer" content="ie-stand">

原文地址:http://se.360.cn/v6/help/meta.html

参考文章:

http://ziren.org/html-css/content-ie-edge-chrome-1-introduction-web-page-using-chrome-rendering.html

http://www.cnblogs.com/huangcong/p/3870276.html

时间: 2024-10-13 01:39:21

兼容利器之X-UA-Compatible的相关文章

后台任务利器之Hangfire

后台任务利器之Hangfire 一.简述 Hangfire作为一款高人气且容易上手的分布式后台执行服务,支持多种数据库.在.net core的环境中,由Core自带的DI管理着生命周期,免去了在NF4.X环境中配置always running的麻烦,真正做到开箱即用. 二.安装 Hangfie官方支持是MsSql和redis,除此之外,可供选择的还有PostgreSql和Mongo.在应用入口项目需要引用Hangfire.AspNetCore和特定持久库,比如使用了MsSql数据库的Hangfi

Android UI开发神兵利器之Angrytools

最近很多人在问我,个人App开发者如何去设计UI. 其实这是个人开发者最头痛的问题,搞技术的人,确实没法做到面面俱到,不可能花大量的时间去切图,去做原型设计,去做美工. 当然,虽然我们设计不出那么复杂,精巧的UI,但是简单的东西,我们在没有美工的基础上,通过一些手段,也是可以做的不错的,从本文开始,我们将介绍一些关于Android界面开发的神兵利器,正是这些大神们开发的工具,让Coder也能做出一些不是那么见不得人的设计. Angrytools,我们今天的主角,我想当初作者也是被UI弄的Angr

Linux菜鸟升级利器之ansible

一.absible是什么? ansible是一款简单的.开源的自动化管理工具.它通过Openssh工作,没有服务器:并且被管理的客户端上面并不需要安装什么客户端软件或启动什么守护进程,没有客户端:扩展模块可以使用任何语言编写:命令自动传输到管理机执行,并返回结果: 二.安装ansible 安装ansible需要使用Fedora的EPEL源,所以要先配置好yum的epel源,在yum源文件中添加: [base1] name=epel baseurl=http://dl.fedoraproject.

web开发利器之grunt

伴随着项目的多样化和复杂化,前端的代码维护和管理(打包.压缩等等)也越来越难以维护,人为的疏忽往往会导致不可预期的错误,对于这样的错误给我们带来了很多的麻烦和多余的工作量:对于前端的项目携同开发来说,我们每个人均会负责不同板块,将JS.CSS拆解成各自个的模块单独开发,为了方便管理这些模块均为独立的文件,而为了页面加载速度(增加了文件个数这时也产生过多的Http请求,影响页面加载速度)我们又不得不将这些文件进行合并.压缩等等,早期我们会用YUI做这些事但如今我们需要的却更多(如项目的源代码做单元

Android UI开发神兵利器之Android Action Bar Style Generator

ActionBar是3.0后的UI设计规范,同时也是Google极力推荐使用的设计风格,如何快速设计一个入眼的ActionBar呢,更进一步,给我们搭好一个入眼的ActionBar的模板吧,于是Android Action Bar Style Generator就出来了:http://jgilfelt.github.io/android-actionbarstylegenerator/ 国际惯例,上图 一目了然,小清新加大方便:大家应该都知道怎么用了吧,so easy! Android UI开发

Android UI开发神兵利器之Icon

好的设计离不开Icon 话不多,介绍2个国外的网站,一个用来找Icon,一个用来搞页面设计 http://dryicons.com/free-icons/ http://www.webdesignshock.com/ 简单易用,纯干货 Android UI开发神兵利器之Icon

Windows渗透利器之Pentest BOX使用详解(一)

内容概览:                                     知识科普                                    优缺点总结 功能参数详解翻译: 控制台参数详解翻译 setting各项功能参数翻译详解: 基本设置(含外观,字体,标签栏等设置) 启动设置(含任务栏其他等) 特征 综合参数 宏设置 文本管理器 基础信息 知识科普: Pentest Box在2015年发布,具体月份不详.Pentest Box开源项目的创始人是Aditya Agrawa

R语言利器之ddply和aggregate

ddply和aggregate是两个用来整合数据的功能强大的函数. aggregate(x, ...) 关于aggregate()函数的使用在<R语言实战>中P105有简单描述,这里重新说一下.此函数主要有一下几种用法: ## Default S3 method: aggregate(x, ...) ## S3 method for class 'data.frame' aggregate(x, by, FUN, ..., simplify = TRUE, drop = TRUE) ## S3

性能调优利器之strace

最近需要对一个自己开发的socket server的性能进行分析,刚开始还想了好长时间怎么来分析.后来才意识到其实使用strace就足够了. 观察到的现象是server单进程CPU使用率97,但磁盘i/o只有400MB/s,但这块磁盘可以达到>1GB/s的速度,于是在server开始跑之后直接用 strace -r -p pid -o outfile cat outfile |awk -F'(' '{print $1}'|awk '{print $1,$2}' >outfile.count 之