IE10的CSS技巧(IE10专属css hack写法)

it_hack 发布于 2013/04/17 18:03
阅读 7K+
收藏 10

本文源自:IT屌丝,码农之家


微软宣布IE10 将不支持条件注释。他们的历史,这显然是一个冒险的举动。截至目前,针对古怪的行为在IE6-9,开发人员已经使用条件的意见有条件的类,以及其他IE特定的hack

但是,如果没有条件在IE10的意见,唯一的选择,我们针对CSS问题是Hack或浏览器嗅探 - 我们当然不希望诉诸后者留下。
IE10专门使用一个Hack。下面是这技术的总结,供参考。
方法1:
特征检测@ cc_on
脚本里面是不包括一个IE的条件注释,以确保IE6-9不承认它,那么它的特点是检测一种叫做 @ cc_on 。在这里,它是:
  1. <!--[if !IE]><!--><script>  
  2. if (/*@cc_on!@*/false) {  
  3.     document.documentElement.className+=' ie10';  
  4. }  
  5. </script><!--<![endif]-->  
复制代码
请注意/*@cc_on ! @*/中间的这个感叹号;这样就可以在ie10中给html元素添加一个class=”ie10″然后在你的CSS,只需要使用“IE10”类:
  1. .ie10 .example {  
  2.    /* IE10-only styles go here */  
  3. }  
复制代码

好吧,其实不知道IE11会不会继续支持这个私有语句,如果是的话,就比较难区分IE10和IE11了。

需要注意的是,条件编译不支持Windows Store中的App中使用,只支持在IE10浏览器中使用。

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


方法2:
@media -ms-high-contrast Hack
IE10支持媒体查询,也支持-ms-high-contrast这个属性,所以,我们可以用它来hack IE10:
  1. @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {  
  2.    /* IE10-specific styles go here */  
  3. }  
复制代码
最终这一条可能是最好的选择,但也许不是现在。最后,IE9用户都应该得到通知通过Windows Update升级到IE10。这应该是包括Windows 7用户。如果发生这种情况,IE9的市场份额最终将被接管的IE10,以同样的方式发生这种情况与其他浏览器自动更新。
除此之外,如果这个分析错误是固定的IE11,那么,这意味着它也将是未来的证明。但我们不会知道,直到被释放IE11。
方法3:
@media Zero Hack
这个有些BT了,而且不是很完美,因为IE9也支持media,也支持\0这个hack:
  1. @media screen and (min-width:0\0) {  
  2.     /* IE9 and IE10 rule sets go here */  
  3. }
复制代码
现在的windows 7中的ie9已经可以升级到ie10了,相信要不了多久IE10就会代替IE9;
加载中
0
it_hack
it_hack
其他两种方法没试,第二种方法试了,真不灵啊……还在苦比的寻找解决方法中……
0
l
laisage
其实我只想说,我操.他.妈 的 IE6 IE7 IE8 IE9 IE10!别的没了~
返回顶部
顶部