IE10 CSS hack

整理自：http://www.impressivewebs.com/ie10-css-hacks/

中文原文： IE10 CSS hack 请尊重版权，转载请注明来源，多谢~~

传说Windows 8刚上市没几天就卖出了4000多万份，好厉害。然后我们就发现项目中很多页面在IE10中表现不正常了。有的是之前对各版本ie的hack引发的，有些不确定是否是ie10引出的bug，所以惯性思维让我们重新寻找针对IE10的CSS Hack。。。

首先，ie10不支持条件注释了。

方法一：特性检测：@cc_on

我们可以用IE私有的条件编译(conditional compilation)结合条件注释来提供针对ie10的Hack：

<!--[if !IE]><!--<script>
if (/*@cc_on!@*/false) {
    document.documentElement.className+=' ie10';
}
</script><!--<![endif]-->

请注意/*@cc_on ! @*/中间的这个感叹号。

这样就可以在ie10中给html元素添加一个class=”ie10″，然后针对ie10的样式可以卸载这个这个选择器下：

1
2
3

.ie10 .example {  /* IE10-only styles go here */
}

条件编译支持所有版本的ie浏览器，而其它浏览器不支持。但是很有可能以后IE11出来后，这种方法就失效了。。。

需要注意的是，条件编译不支持Windows store中的app中使用，只支持在IE浏览器中使用。

当然，我们也可以用传统的用ua给ie10中html元素添加class的方法来实现。

方法二：@media -ms-high-contrast

IE10支持媒体查询，然后也支持-ms-high-contrast这个属性，所以，我们可以用它来hack ie10：

1
2
3

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {  /* IE10-specific styles go here */
}

这种写法可以适配到高对比度和默认模式。所以可以覆盖到所有ie10的模式了。

然后这种方式可能也会在后面的IE11中生效。

当然，方法二也可以和方法一一起用：

1
2
3

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

方法三：@media 0

这个有些变态了，而且不太完美，因为IE9也支持media，也支持\0的hack：

1
2
3

@media screen and (min-width:0\0) {  /* IE9 and IE10 rule sets go here */
}

不过，估计后面ie10也会普及到Windows 7平台，所以ie9会消失，只是看看ie8和ie7的份额，这种情况可能不会发生吧。。。

总结：

我不想给ie写hack，嗯，不想为ie多写一句代码。。。

转载于:https://www.cnblogs.com/joe235/archive/2013/03/18/2966261.html

IE10 CSS hack相关推荐

IE6 IE7 IE8 IE9 IE10 Css hack及IE条件注释法
IE浏览器的csshack写法和IE条件注释语句 IE css hack 网络上有很多针对IE的css hack写法,但很多都缺乏实际的实战经验,今天我把我测试的结果来给大家分享下,注意:你们最好还是 ...
ie10 11 css兼容性问题,学习一下IE10和IE11的CSS Hack
有IE就有hack,看看IE9的css hack,IE8的css hack:上次同事说一个页面IE10下有问题,IE9下测试了一下,也有同样的问题.悲剧了赶紧找IE10的hack. google上翻到 ...
[转]CSS hack大全详解
转自:CSS hack大全&详解 1.什么是CSS hack? CSS hack是通过在CSS样式中加入一些特殊的符号,让不同的浏览器识别不同的符号(什么样的浏览器识别什么样的符号是有标准的, ...
针对IE6\7\8\9\10浏览器的CSS hack大全详解
目前IE内核浏览器仍然是国内主流浏览器,占据着PC浏览器的大部分市场份额,版本从IE6到IE10,所有前段工作者都必须面对和解决多个IE浏览器对代码的兼容性问题.在很多情况下,我们需要专门针对IE写c ...
css hack *html,CSS Hack详解
CSS Hack是实现浏览器样式兼容的兜底办法,能不用就尽量不要使用.但是,针对一些浏览器的bug,比如老版本IE的bug,有时使用CSS Hack是不得已而为之的做法.本文将详细介绍CSS Hack ...
史上最全的CSS hack方式一览（转）
做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我们会极不情愿的使用这个不太友好的方式来达到大家要求的页面表现.我个人是不太推荐使用hack的,要知道 ...
【荐】说说CSS Hack 和向后兼容
人一旦习惯了某些东西就很难去改,以及各种各样的原因,新的浏览器越来越多,而老的总淘汰不了.增长总是快于消亡导致了浏览器兼容是成了谈不完的话题.说到浏览器兼容,CSS HACK自然而然地被我们想起.今 ...
CSS Hack 和向后兼容
人一旦习惯了某些东西就很难去改,以及各种各样的原因,新的浏览器越来越多,而老的总淘汰不了.增长总是快于消亡导致了浏览器兼容是成了谈不完的话题.说到浏览器兼容,CSS HACK自然而然地被我们想起.今天 ...
css hack 学习总结
css hack CSS hack由于不同厂商的浏览器,比如Internet Explorer,Safari,Mozilla Firefox,Chrome等,或者是同一厂商的浏览器的不同版本,如IE ...
一天搞定CSS（扩展）：CSS Hack
做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我们会极不情愿的使用这个不太友好的方式来达到大家要求的页面表现.我个人是不太推荐使用hack的,要知道 ...

IE10 CSS hack

方法一：特性检测：@cc_on

方法二：@media -ms-high-contrast

方法三：@media 0

总结：

IE10 CSS hack相关推荐

最新文章

热门文章