zoukankan      html  css  js  c++  java
  • ie10 css hack 条件注释等兼容方式整理

    点评:ie10已经上线一段时间了,相信已经有一部分前端潮人体验过了,截至到现在,在ie6到ie9的浏览器各种各样的古怪行为,开发人员不得不使用条件注释,有条件的类,和其他特定于IE的css hack来解决

    ie10已经上线一段时间了,相信已经有一部分前端潮人体验过了,但是针对ie10的css hack大家了解吗? 
    去年微软宣布,win8的Metro版IE10将不再支持插件,并且不再支持条件注释,这显然是一个冒险的举动。截至到现在,在ie6到ie9的浏览器各种各样的古怪行为,开发人员不得不使用条件注释,有条件的类,和其他特定于IE的css hack来解决。 

    ps:条件注释是一种安全的区分IE浏览器版本的语法,且被认为是取代针对IE css hack的首选办法。 
    但是,如果IE10不再支持条件注释,我们唯一的选择只能针对css的问题用css hack或者判断浏览器来解决 我们当然不希望试用后者。 
    有趣的是,国外已经出现了牛人的解决方法,当然不是专门使用一个css hack 解决问题的的代码片段。下面是给出这三项技术的总结,以供参考。

    方法一:特性检测:@cc_on 
    我们可以用IE私有的条件编译(conditional compilation)结合条件注释来提供针对ie10的Hack:该脚本里面的IE排除条件注释,以确保IE6-9不承认它,然后它功能检测到了名为@ cc_on。在这里: 

      代码如下:

      <!DOCTYPE html> 
    <html> 
    <head> 
    <meta charset=utf-8 /> 
    <title>JS Bin</title> 
    </head
    <body> 
    <!--[if !IE]><!--<script> 
    if (/*@cc_on!@*/false) { 
    document.documentElement.className+=' ie10'; 

    </script><!--<![endif]--> 
    </body> 
    </html


    请注意/*@cc_on ! @*/中间的这个感叹号。 
    这样就可以在ie10中给html元素添加一个class=”ie10″,然后针对ie10的样式可以卸载这个这个选择器下: 

      代码如下:

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


    条件编译支持所有版本的ie浏览器,而其它浏览器不支持。但是很有可能以后IE11出来后,这种方法就失效了。。。 
    需要注意的是,条件编译不支持Windows store中的app中使用,只支持在IE浏览器中使用。 
    当然,我们也可以用传统的用ua给ie10中html元素添加class的方法来实现。 
    不像其他的解决方案,在这种方法中,实际上是依赖于JavaScript,所以从另一个角度来看,我们是反对的。 
    当然有人已经发布的改进的版本,这个检测功能,将不包括IE11,并不需要条件注释。然而它会引发““eval is evil”js警告报错信息。 
    下面是演示: 
    在这里,我创建了一个替代版本不具备的eval警告: 

    您也可以尝试,这只是打印出当前的IE版本,这个版本没有测试: 

    但是,这似乎在IE8错误,读为“IE5”,直到您刷新页面,非常奇怪。

    方法二:@media -ms-high-contrast 
    IE10支持媒体查询,然后也支持-ms-high-contrast这个属性,所以,我们可以用它来hack ie10: 

      代码如下:

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


    这种写法可以适配到高对比度和默认模式。所以可以覆盖到所有ie10的模式了。 
    然后这种方式可能也会在后面的IE11中生效。 
    当然,方法二也可以和方法一一起用: 

      代码如下:

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


    实例: 

      代码如下:

      <!DOCTYPE html> 
    <html> 
    <head> 
    <meta charset=utf-8 /> 
    <title>JS Bin</title> 
    </head
    <body> 
    </body> 
    </html



    方法三:@media 0 
    这个有些变态了,而且不太完美,因为IE9也支持media,也支持的hack: 

      代码如下:

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


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

    结束语 
    事实是,你不应该使用css hack针对IE10浏览器,甚至是IE9浏览器。使用一个很好的CSS工作流程,在编写代码时,应用良好的原则。 
    而在大多数情况下,当不同的,你应该能功能检测,以填补空白,或者使用优美的退化允许接受的经验IE10。 
    如果任何人有任何其他的关于ie10 css hack的相关信息,或知道任何其他的针对IE10的条件注释方法,欢迎更新相应的方法

  • 相关阅读:
    11-基于CPCI的中频功率放大收发板
    10-基于TMS320C6678+XC7K325T的6U CPCI Full Camera Link图像处理平台
    141-FMC141-4路 250Msps/16bits ADC, FMC板卡
    125-FMC125-两路125Msps AD,两路160Msps DA FMC子卡模块
    164-基于TI DSP TMS320C6455和Altera FPGA EP2S130的Full CameraLink PDS150接口板卡
    北京太速科技有限公司 layout 事业部
    20-基于 DSP TMS320C6455的6U CPCI高速信号处理板卡
    64-基于TMS320C6455、XC5VSX95T 的6U CPCI无线通信处理平台
    18-基于双TMS320C6678 DSP的3U VPX的信号处理平台
    202-基于TI DSP TMS320C6678、Xilinx K7 FPGA XC72K325T的高速数据处理核心板
  • 原文地址:https://www.cnblogs.com/zhaodifont/p/4092235.html
Copyright © 2011-2022 走看看