准备与IE10作战吧 – 如何鉴别IE10

随着Windows 8的正式发布，IE10已经开始逐渐投入正式使用。尽管IE10已经在网络标准化方面有了显著改进，IE10仍然无法达到理想状态。

未雨绸缪，《准备与IE10作战》系列将从网络上搜集一些与IE10兼容性相关的话题汇总发布。第一篇，我们首先来看看如何鉴别IE10。

本文的所有代码均来自于http://www.impressivewebs.com/ie10-css-hacks/，如果您对其中的内容有任何疑问，请以原文为准。

早在一年前，微软已经宣布IE10不再支持之前IE浏览器所一贯支持的“IE条件标记”（conditional comments），也就是说，下面的语句对IE10是无效的：

因此，找出其它的方案来识别IE10，对于前端开发者来说，需要另辟蹊径（当然，你随时可以借助后端，但那不是前端开发者的事情了）。以下是网络上流传的几条“偏方”。

检测“@cc_on”

这条诡异的偏方来自于StackOverflow的一则问答评论（SO水始终很深）：

如此，将为整个HTML的DOM元素增加一个名为ie10的class，于是我们就可以直接在CSS中这样针对IE10开刀：

.ie10 .example {
   /* 仅限IE10的代码 */
}

不知道为啥这个恶心的玩意儿怎么来的，但它确实有效。然而这段代码依赖于JavaScript，因此不是我们的最佳选择。

示例

“@media -ms-high-contrast”的救赎

以下是来自Github一则gist的技巧，它利用了IE10对ms-high-contrast这一CSS属性的支持，而IE9恰好不支持：

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
   /* 仅限IE10的代码 */
}

看起来很不错，可惜这个技巧在IE10的早期预览版（Platform Preview 1 and 2）当中并不奏效，因为这些预览版不支持这一CSS属性；而且IE11也无法与IE10区分开了。所以这则技巧也不是我们的最佳选择。

示例

奇妙的“@media 0/0”

这则技巧在Keith Clark的博客中记载，但不知道谁发明的。

@media screen and (min-width:0\0) {
    /* IE9与IE10的专有代码 */
}

缺点很明显：它不能避开IE9。但是考虑到Windows 7的用户最终将通过安全更新，将IE9升级为IE10，我们姑且乐观的认为IE9最终就不再存在了。而IE11是否识别这段代码尚未知晓，于是这条技巧八成最适合未来的情形。

示例

尝试”严格模式”特性检测

JavaScript的严格模式我们之前已经转载过一篇文章来说明，是一种将更好的错误检查引入代码中的方法。在IE之前的版本中，严格模式是不支持的，而IE10则能够进行支持，所以我们可以通过下面的JS代码来进行IE10检测：

var isIE10 = /msie/i.test(navigator.userAgent) && (function() {"use strict";return this === undefined;}());
if(isIE10)
	document.documentElement.className+=' ie10';

这则技巧来自于本文的评论，更原始的出处我没有考证。

这则代码实际上也是有隐患的，原因在于代码不能很好的避开IE的未来版本。如果严格模式被证明是一种非常好用的方法，那么IE11当中就极可能继续进行支持。这样，我们的代码就无法避开IE11了。

与此相仿，msCapsLockWarningOff特性也是IE10当中新加入的一项特性，但我们无法预知它是否会在IE11中继续存在，因而很难可靠的利用它。

结论就是没有结论

结论就是没有结论。上面这几条技巧其实没有一个万全之策，但实际上和IE10死磕的情形不多。我们应该做的是使用一些正规的手段检测浏览器对我们需要特性的支持，比如使用之前说过的Modernizr。

听起来很恶心，除非你找到了更好的灵丹妙药。届时别忘了告诉我;)