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. [SAP ABAP开发技术总结]预定义(内置)数据类型

    声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...

  2. Spark ML聚类分析之k-means||

    今天更新了电脑上的spark环境,因为上次运行新的流水线的时候,有的一些包在1.6.1中并不支持 只需要更改系统中用户的环境变量即可 然后在eclipse中新建pydev工程,执行环境是python3 ...

  3. Linux Shell Bash 带有特殊含义的退出码

    linux在执行完一条命令后,使用 echo $? 会显示上一条命令是否执行成功,相关状态码如下 0为成功 表格 D-1. "保留的"退出码 退出码的值 含义 例子 注释 1 通用 ...

  4. 控制执行流程 Thinking in Java 第四章

    4.1 true 和 false *Java 不允许将一个数字作为布尔类型(虽然在C和C++中可以),使用时需要条件表达式将其转换为布尔类型: 如下: if( a!= 0) 4.2 if-else 4 ...

  5. [转载] Linux下查看内存使用情况方法总结

    原文: http://9iphp.com/linux/1247.html 强烈推荐 htop.

  6. html5 的draggable属性使用<转载收藏>

    在HTML5中,已经支持在浏览器与其他应用程序之间的数据互相拖动,同时也大大简化了有关于拖放方面的代码. 实现拖放的步骤 在HTML5中要想实现拖放操作,至少要经过两个步骤: 将想要拖放的对象元素的d ...

  7. nginx相关优化

    1.配置监控nginx状态信息 vim /usr/locale/nginx/conf/nginx.conf server { listen ; server_name 192.168.1.30; lo ...

  8. MyBatis——Mybatis缓存

    原文:http://www.cnblogs.com/xdp-gacl/p/4270403.html MyBatis学习总结(七)--Mybatis缓存 一.MyBatis缓存介绍 正如大多数持久层框架 ...

  9. hiho_1070_RMQ

    题目 区间最小值查询,但是支持对数组中的任意数字进行修改. 分析 采用RMQ_ST算法的O(1)算法不支持修改,因为每次修改都要重新设置动归数组.因此采用线段树解决,修改和查询的复杂度均为O(logN ...

  10. hiho_1058_combination_lock

    题目大意 给定N个字符,范围为A-Z,编号为1-N,对该字符序列进行M个操作,操作有4中类型: (1)CMD 1 i j X     将[i, j]区间内的字符均变为X (2)CMD 2 i j K  ...