IE10 hack 一例

为什么80%的码农都做不了架构师？>>>   

在升级了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，

最终的代码：

    <script>

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

    </script>

CSS样式再做一些改变：

.ie10 .layout{

    font-size: 0;

}

.ie10 .layout [class*=span]{

    display: inline-block;

    vertical-align: top;

    font-size: 12px;

}

参考文献：

1. http://www.cnblogs.com/rubylouvre/archive/2012/12/07/2806775.html

转载于:https://my.oschina.net/bilxio/blog/124759