IE10 hack 一例

April 23, 2013

在升级了IE10之后，发现在IE9下表现正常的hao123在IE10下抽风了，查来查去，就发现是IE10把IE条件注释给取消了，这下可就麻烦了，为什么呢？

hao123已经全面使用了CSS3+HTML5，其中页面的主体layout是基于CSS3的flex box，由于IE9及更旧版本并不支持CSS3的这一特性，所以针对IE专门准备了一个hack css文件，通过条件注释的方式引入。问题就来了，IE10既然已经不再支持条件注释，那么针对IE系列浏览器做的特殊优化就无法引入了。

为了解决此问题，google了之后，觉得有两种方法：

第一种，是想办法让浏览器继续支持box布局，在 http://stackoverflow.com/questions/6873753/css-alternative-for-displaybox-for-ie-and-opera 找到答案。

第二种，就是想办法继续hack IE10，搜索出来的结果还是令人欢欣的，既然不能再用条件注释，那么就只能另辟蹊径了，还好IE10已经支持了media query，最终的代码：

if (window.matchMedia("screen and (-ms-high-contrast: active), (-ms-high-contrast: none)").matches) {
    document.documentElement.className += "ie10"; }

CSS样式再做一些改变：

.ie10 .layout{
    font-size: 0;
}
.ie10 .layout [class*=span]{
    display: inline-block;
    vertical-align: top;
    font-size: 12px;
}

已发表在OSC

2013-4-23

Blog

IE10 hack 一例