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。
说的有点别扭,直接看代码:

这些注释写在了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条件注释了。

2 thoughts on “IE compatible mode 和 Boilertemplate”

  1. ‘X-UA-Compatible’ ‘IE=edge,chrome=1’这个header快成行业标配了 连Rails默认的middleware里都有。。
    虽然我觉得根本没人用Webkit内核的IE。。

    1. 大概三年前的东西了,确实应该已经没人用了。chrome=1已经被boilertemplate去掉了。

Comments are closed.