IE10 CSS hack,IE兼容问题

作者: 雪影 发表于2013 年 4 月 25 日 分类:技术分享 | 暂无评论 | 人气: 376 度

首先,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的样式可以卸载这个这个选择器下:

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

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

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

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

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

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

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

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

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

当然,方法二也可以和方法一一起用:

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

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

1, 选择符前缀法,即在CSS选择符前加一些只有特定浏览器才能识别的前缀。

*html 前缀只对IE6生效 *+html 前缀只对IE7生效

例如:

.test{ color:#FFF;}
*html .test{ color:#000;}  /* only for ie6 */
*+html .test{ color:#CCC;} /* only for ie7 */

2, 属性前缀法,即在样式属性名前加一些只有特定浏览器才能识别的前缀。

“-” 只对IE6生效

“*” 只对IE6和IE7生效

例如:

.test{ color:#FFF; *color:#CCC; -color:#000;}

3, 还有一种hack方法是在属性值后加上一些只有特定浏览器才能识别的前缀。

“\9″  IE6/IE7/IE8/IE9/IE10都生效

“″ IE8/IE9/IE10都生效

“\9″ 只对IE9/IE10生效

例如:

.test{ color:#FFFcolor:#CCC\9color:#3FC\0;}

文章内容整理自:http://www.impressivewebs.com/ie10-css-hacks/      http://www.ifrans.cn/css-hack/

IE10 CSS hack,IE兼容问题的更多相关文章

  1. ie10 css hack 条件注释等兼容方式整理

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

  2. IE10 CSS Hack(顺便聊聊IE11的CSS Hack)

    一.特性检测:@cc_on 我们可以用IE私有的条件编译(conditional compilation)结合条件注释来提供针对ie10的Hack:该脚本里面的IE排除条件注释,以确保IE6-9不承认 ...

  3. CSS hack样式兼容模式收藏

    part1 —— 浏览器测试仪器,测试您现在使用的浏览器类型 IE6   IE7   IE8   Firefox   Opera   Safari (Chrome)   IE6   IE7   IE8 ...

  4. CSS hack浏览器兼容一览表

    CSS hack是指我们为了兼容各浏览器,而使用的特别的css定义技巧.这是国外摘来的一张CSS hack列表,显示了各浏览器对css hack的支持程度,对我们制作兼容网页非常有帮助.

  5. CSS hack 汇总

    1, IE条件注释法,微软官方推荐的hack方式. <!]> IE6以及IE6以上版本可识别 <![endif]--> <!]> 仅IE7可识别 <![end ...

  6. CSS Hack是什么意思

    CSS hack由于不同的浏览器,比如Internet Explorer 6,Internet Explorer 7,Mozilla Firefox等,对CSS的解析认识不一样,因此会导致生成的页面效 ...

  7. CSS hack(过滤器)

    CSS hack概念: 是针对不同浏览器对同一段代码解析不同的处理方案:<解决兼容性问题> 属性设置在不同版本的IE里会出现不兼容问题,css hack解决兼容主流浏览器和IE 常见的过滤 ...

  8. 【荐】说说CSS Hack 和向后兼容

    人一旦习惯了某些东西就很难去改,以及各种各样的原因,新的浏览器越来越多,而老的总淘汰不了.增长总是快于消亡导致了浏览器兼容是成了谈不完的话题.说 到浏览器兼容,CSS HACK自然而然地被我们想起.今 ...

  9. css Hack 以及css的一些兼容问题小结

    坚持每天做总结.今天下班还算早.写个跟css兼容有关的知识点.便于后期查看与学习.一.先说说各种主流浏览器的内核 浏览器最重要或者说核心的部分是“Rendering Engine”,可大概译为“渲染引 ...

随机推荐

  1. 先来个xmpp学习连接

    http://my.oschina.net/SoulJa/blog?catalog=3340253&temp=1468228088114 http://my.oschina.net/iOSli ...

  2. JAVA运算符和优先级

    1.算术运算符: ++ 和 -- 既可以出现在操作数的左边,也可以出现在右边,但结果是不同,如: ①int a=5: int b=a++: #先把a赋给b,a再自增 ②int a=5: int b=+ ...

  3. Java——Java日期转Sql日期

    import java.text.ParseException; import java.text.SimpleDateFormat; import java.util.Date; public cl ...

  4. 《Linux内核设计的艺术》学习笔记(五)INT 0x10中断

    参考书籍: 1. <IBM-PC汇编语言程序设计> 2. http://www.ctyme.com/intr/int-10.htm   ◆ 设置显示方式: 功能号:AH = 00H 调用参 ...

  5. Python跳过第一行读取文件内容

    Python编程时,经常需要跳过第一行读取文件内容.比较容易想到是为每行设置一个line_num,然后判断line_num是否为1,如果不等于1,则进行读取操作.相应的Python代码如下: inpu ...

  6. MVC3远程验证

    public class StudentModel { [Display(Name="学生编号")] public int StuId { set; get; } [Require ...

  7. ubuntu的dns设置

    ubuntu的dns设置为: dns-nameservers 8.8.8.8 注意不要少s

  8. Spring对hibernate的事物管理

    把Hibernate用到的数据源Datasource,Hibernate的SessionFactory实例,事务管理器HibernateTransactionManager,都交给Spring管理.一 ...

  9. MediaPlayer的生命周期

  10. Linux socket编程应用学习笔记

    参考这个系列吧 http://www.cnblogs.com/wunaozai/tag/%E7%BD%91%E7%BB%9C%E7%BC%96%E7%A8%8B/default.html?page=2 ...