1.微软为什么要设计这个属性？
因为高版本的ie，废除了一些老旧的、不符合w3规范的api或特性，并不直接向下兼容。以前针对低版本开发的程序，可能在高版本上就会出现问题，为了照顾大家的情绪，就设计了这个属性，让开发者可以叫新ie以以前的方式执行程序。
比如：
obj = document.getElementById("testdiv");
obj.addEventListener('click', function(){ alert('1') })
你可能很熟悉这个代码，但是ie8并不支持addEventListener，所以当时的开发人员就用了它支持的方式：
obj.attachEvent('onclick', function(){ alert('1') })
一直到ie10都还支持这个方法，ie11则不支持了。实际情况中，从头去改可能很麻烦。但用户用ie11打开这个网站可能就会出故障，为了避免这个问题，就可以告诉ie11以ie10的方式渲染。
2.指定方式有三种：
- <meta http-equiv="x-ua-compatible" content="IE=10,chrome=1">
- 接口设置响应头
- 服务器直接配置
3.特点：
-
ie8开始支持，edge不支持。也就是说只有ie8、ie9、ie10、ie11支持。
-
只能模拟比当前安装版本更低的版本，不能模拟更高版本。比如开发者设置了ie=10，ie11的用户打开是ie10方式渲染，ie9用户则还是9，或者用户在浏览器上自行设置的兼容视图版本。
-
ie=edge，是指以此客户端支持的最新版本渲染，如ie9就以9方式渲染，即使用户在浏览器上设置了其他版本ie兼容模式也无效。
我本来还以为设置了ie=edge ，那些ie8\9的客户端就以最新的edge浏览器渲染了，还窃喜浏览器兼容竟然如此简单 o(╥﹏╥)o
另外chrome=1几乎无用，因为晓得去下载chrome frame 的用户根本不得用ie，而且chrome frame在14年之后也不提供支持服务了。但最好还是加上。
4.检测 ie实际渲染方式：document.documentMode，edge无效。
5.demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=10,chrome=1">
<title>Title</title>
<style type="text/css">
.wrap {
position: relative;
width: 100px;
height: 100px;
margin: auto;
background-color: green;
}
.item {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 50px;
height: 50px;
background-color: blueviolet;
}
</style>
</head>
<body>
<div class="wrap" id="testdiv">
<div class="item"></div>
</div>
<script type="text/javascript">
obj = document.getElementById("testdiv");
obj.attachEvent('onclick', function(){ alert('1') })
// obj.addEventListener('click', function(){ alert('1') })
// 切换至ie8，可见ie8连 transform 也不支持
</script>
</body>
</html>
浅析网页meta标签中X-UA-Compatible属性的使用
IE 兼容性标记 X-UA-Compatible 解释和用法
6.待续：
ie=EmulateIE8和ie=8的区别？
http-equiv还有哪些用？
http-equiv和response-header同时作用下，到底听谁的？
网友评论