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, 最终的代码:

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

© 2022, Bill X.