X-UA-Compatible是神马？

X-UA-Compatible是IE8的一个专有<meta>属性，它告诉IE8采用何种IE版本去渲染网页，在html的<head>标签中使用。可以在微软官方文档获取更多介绍。

为什么要用X-UA-Compatible？

在IE8刚推出的时候，很多网页由于重构的问题，无法适应较高级的浏览器，所以使用X-UA-Compatible标签强制IE8采用低版本方式渲染。

使用下面这段代码后，开发者无需考虑网页是否兼容IE8浏览器，只要确保网页在IE6、IE7下的表现就可以了。

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

时至今日，IE6已被微软判了死刑，我们在重构时应首先考虑更完善的IE8下的体验，然后依次回退兼容IE7和6。令我担忧的情况是当IE9正式发布时如果IE6在国内还没被淘汰，那么将出现前端工程师需要面临4个IE版本的疯狂局面（且4个版本显示差异较明显）。

给网站添加X-UA-Compatible标签

我建议使用下面的X-UA-Compatible标签：

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

IE=edge告诉IE使用最新的引擎渲染网页，chrome=1则可以激活Chrome Frame[1]。

网页中添加方法

在<head>下面添加上述代码即可。WordPress则在主题header.php文件里做修改。

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

当然你可能像Sivan一样有代码洁癖和一定程度的标准癖，那么我们还可以从服务器端进行这个设置，请继续往下看。

Apache服务器设置方法

嗯⋯⋯我们可以在Apache主机做一些设置让服务器告诉IE采用何种引擎来渲染。在网站作用目录找到或新建.htaccess文件，添加下面的内容保存即可。

<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服务器设置方法

现在很多朋友使用Nginx作为搭建环境，当然也是OK的。找到\nginx\conf\nginx.conf并编辑，在server { }区域里（最好是闭合符前面起一行）添加下列代码即可

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

不清楚具体位置的请参考paul irish的配置文件。

好啦，上面就是3种常用的添加方法。我认为这个标签主要是为重构者服务，如果代码的兼容性很强那么不用也罢。

Chrome Frame[1]：Chrome Frame可以让旧版IE浏览器使用Chrome的WebKit渲染引擎处理网页，因此旧版IE用户可以体验到包括HTML5在内的众多现代网页技术

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

【转】给网站添加X-UA-Compatible标签的更多相关文章

  1. 给网站添加X-UA-Compatible标签

    给网站添加X-UA-Compatible标签 方法一:<meta http-equiv="X-UA-Compatible" content="IE=EmulateI ...

  2. 网站添加第三方登陆(PHP版)

    这两周正在写毕业设计,我做的是一个问答网站.先介绍一下这个网站:这是一个关于大学生在线问答的网站,类似知乎和百度知道,不过功能没有人家多,毕竟这个网站我一个人在做.网站部署在阿里云,网站包括API,W ...

  3. [译]：Orchard入门——给网站添加新博客

    原文链接:Adding a Blog to Your Site 文章内容基于Orchard 1.8版本 Orchard提供一个博客引擎--这让添加一个新博客到你网站变得非常容易. 本文将介绍怎样添加一 ...

  4. 使用prismjs为网站添加代码高亮功能

    prismjs 是一款轻量.可扩展的代码语法高亮库,使用现代化的 Web 标准构建,使用 Prismjs 可以快速为网站添加代码高亮功能,支持超过113中编程语言,还支持多种插件,是简洁.高效的代码高 ...

  5. 将网站添加到iPhone的主屏幕上

    我之前有篇文章介绍过如何将网站固定到Windows的开始菜单,并可以自定义图标.颜色以及Windows推送通知,其实Apple也有类似的功能,通过在网页的head部分添加link标记,在Safari浏 ...

  6. 利用nginx向现有网站添加登录验证功能（不添加修改现有网站代码）

    在不改变现有网站代码的前提下加入验证功能: 1.假设现有网站后端nodejs,端口3000,nginx配置如下 server { listen 80; server_name localhost; l ...

  7. 如何为 Drupal 7 网站添加悬浮的反馈按钮？

    最近有客户咨询我们要怎么为 Drupal 网站添加悬浮按钮,方便访客能够链接到反馈表单页面.很幸运,使用 Feedback Simple 模块可以很容易实现. 在这篇短教程中,我将和大家分享如何添加链 ...

  8. SharePoint2013网站添加切换用户登录

    不知道大家发现没,sharepoint2013的网站集下面没有了切换用户登陆这个选项卡,这对于我们有时候要做一些权限性的实验是不太方便的,今天我找到了一个办法解决,又实际应用了一下,感觉不错,特地来和 ...

  9. 网站添加到IIS和附件进程调试（新手使用篇）

    一.网站添加到IIS 做网站开发,很有必要把项目添加到IIS中,这对浏览和后期的调试很有帮助.怎么把网站添加到IIS上? 1). 打开IIS,然后操作步骤如下图: 选择Default Web Site ...

随机推荐

  1. oracle逐步学习总结之约束（基础五）

    原创作品,转自请在文章明显位置注明出处:https://www.cnblogs.com/sunshine5683/p/10167717.html oracle中的约束主要有非空约束(not null) ...

  2. 杭电 OJ 提交代码需要注意的问题

    杭电acm 提交代码需要注意的问题 1. 用 Java 的时候类名请用 Main 2. Java 提交出现 PE 的可能原因有 1) 最基本的错误是空格问题,比如注意每行的末尾是否输出空格 2) 用 ...

  3. 获取物化视图定义语句的SQL

    老系统里总有人用物化视图,然后新同事们就得去FixBug 然后就遇到怎么查看物化视图定义语句的问题了 分享下,祝顺利! DBA权限下执行: select dbms_metadata.get_ddl(' ...

  4. 微信小程序< 3 > ~ 微信小程序开源项目合集

    简介 移动开发者想学习微信小程序需要学习一点HTML ,CSS和JS才能够比较快速的上手,参考自己学习Android学习过程,阅读源码是一个很好的方式,所以才收集了一些WeApp的开源项目. awes ...

  5. postman和接口自动化测试

    1.postman测试接口 (1)首先安装postman 下载地址:https://www.getpostman.com/apps 选择对应版本下载,然后安装即可 (2)使用postman发送请求 比 ...

  6. flutter .g文件生成不了

    [SEVERE] Conflicting outputs were detected and the build is unable to prompt for permission to remov ...

  7. 开源免费的文档协作系统 onlyoffice平台轻松部署

    请移步至此,更详细:http://blog.csdn.net/hotqin888/article/details/79337881 ONLYOFFICE是一个免费的.开源的企业办公套件,用于在线组织团 ...

  8. 微信小程序开发--背景图显示

    这两天开发微信小程序,在设置背景图片时,发现在wxss里面设置 background-image:(url) 属性,不管是开发工具还是线上都无法显示.经过查资料发现,background-image ...

  9. react native中Unable to load script from assets 'index.android.bundle'解决方案

    刚刚朋友问我,说是创建好一个项目,运行后报错:Unable to load script from assets 'index.android.bundle',以前好好的没出现这种现象,于是我找到一个 ...

  10. 让 Angular 应用动起来！

    [编者按]本文主要通过生动的实例,介绍为 Angular 应用添加动画的原理与过程.文章系国内 ITOM 管理平台 OneAPM 编译呈现. 我们知道,Angular 应用在更新 DOM 时,会直接将 ...