IE10 hack 一例

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

你可能感兴趣的:(IE10,hack)