zoukankan      html  css  js  c++  java
  • 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:

    1
    2
    3
    4
    5
    
    <!--[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-0\0) {  
        /* IE9 and IE10 rule sets go here */  
    }

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

    总结:

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

  • 相关阅读:
    「两千年中公历转换」数据库介绍
    [转]Web中使用Word控件。(DSOFramer )
    解决DRIVE_IRQL_NOT_LESS_OR_EQUAL的方法
    Html Img的几个属性_存在个问题
    不错的开源C#博客_BlogEngine.net
    [转]引用指定的namespace 解决命名空间冲突的错误
    [原]不太完善的图像合并程序VS2005CSharp_有目录监控_TIF_JPG输出
    [转]JS小游戏_9格的棋
    JS小游戏_能坚持几秒
    [转]前台JS限制上传图片质量大小和尺寸!
  • 原文地址:https://www.cnblogs.com/joe235/p/2966261.html
Copyright © 2011-2022 走看看