IE compatible mode 和 Boilertemplate

之前有写过一篇毫无技术含量的文章，现在要来纠正一些概念。

首先，我误解了兼容模式的概念。
IE开兼容模式后，documentMode确实是7，但是渲染模式是根据<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />来决定的。
其中，值为IE=edge，edge就是启用该IE浏览器最高版本的渲染模式。
如果，IE11开兼容模式，IE=edge即是开启IE11的渲染模式。
因此可以在这里手工指定渲染模式，比如6,7什么的。
详见MSDN文档。

另外说下这里的chrome=1是怎么回事。
google以前出过一个嵌入IE的chrome内核之类的东东，可以开着IE用chrome内核，但这东东已经停止开发了。
chrome=1的意思是，“如果有chrome内核就用chrome内核，不要管他什么IE了~”
然后-webkit什么的都生效了。

接下来要扯到boilertemplate了。
boilertemplate基本上已经是业界标准html模板了，曾经（写这篇文章的时候已经是“曾经”了）用了IE Conditional Class。
说的有点别扭，直接看代码：

<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->

这些注释写在了html上，compatibleMode meta之前，导致了IE没法正确读取渲染模式。
这样不管你的浏览器是IE10还是IE20。不管你怎没指定渲染版本，都会默认回退到IE7模式。
这样渲染模式和文档模式都是IE7了，明明可以少写些hack的，却不得不写IE7 hack了，这是人间悲剧。

之前我有把这些注释移到body上去，但这样就限制了的灵活性，没有人想同一个body class写4遍。
但是写在html上又会导致兼容模式的问题。
就在我差点放弃决定重新把这些东西移到body上去的时候，我看到msdn的文档里写着：

网站管理员可以通过定义站点的自定义标头，将其站点配置为默认采用特定的文档兼容性模式。

这意味着，控制渲染模式的这个meta可以移到server端去了，那些class可以保留在html标签上了。
查了些资料，在nginx的站点配置里加了行：
add_header 'X-UA-Compatible' 'IE=edge,chrome=1';
毛问题都没有了！

但是另外要说下，最新版本的boilertemplate已经把IE conditional class移除了。
原因大致看了下，一方面有modernizr可以通过样式支持判断来进行ie hack，另一方面IE11开始也不支持这样的条件注释了。
详情请转向github。
天下太平了~

如果还在用ie条件注释，并且需要指定兼容模式的渲染模式的话，就改用服务器端方法吧。
如果有用modernizr并且不需要兼容ie8以下的话，个人觉得可以拿掉IE条件注释了。

箱猫日和

IE compatible mode 和 Boilertemplate

2 responses to “IE compatible mode 和 Boilertemplate”