IE10 CSS hack,IE兼容问题
IE10 CSS hack,IE兼容问题
首先,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:#FFF; color:#CCC\9; color:#3FC\0;} |
文章内容整理自:http://www.impressivewebs.com/ie10-css-hacks/ http://www.ifrans.cn/css-hack/
IE10 CSS hack,IE兼容问题的更多相关文章
- ie10 css hack 条件注释等兼容方式整理
点评:ie10已经上线一段时间了,相信已经有一部分前端潮人体验过了,截至到现在,在ie6到ie9的浏览器各种各样的古怪行为,开发人员不得不使用条件注释,有条件的类,和其他特定于IE的css hack来 ...
- IE10 CSS Hack(顺便聊聊IE11的CSS Hack)
一.特性检测:@cc_on 我们可以用IE私有的条件编译(conditional compilation)结合条件注释来提供针对ie10的Hack:该脚本里面的IE排除条件注释,以确保IE6-9不承认 ...
- CSS hack样式兼容模式收藏
part1 —— 浏览器测试仪器,测试您现在使用的浏览器类型 IE6 IE7 IE8 Firefox Opera Safari (Chrome) IE6 IE7 IE8 ...
- CSS hack浏览器兼容一览表
CSS hack是指我们为了兼容各浏览器,而使用的特别的css定义技巧.这是国外摘来的一张CSS hack列表,显示了各浏览器对css hack的支持程度,对我们制作兼容网页非常有帮助.
- CSS hack 汇总
1, IE条件注释法,微软官方推荐的hack方式. <!]> IE6以及IE6以上版本可识别 <![endif]--> <!]> 仅IE7可识别 <![end ...
- CSS Hack是什么意思
CSS hack由于不同的浏览器,比如Internet Explorer 6,Internet Explorer 7,Mozilla Firefox等,对CSS的解析认识不一样,因此会导致生成的页面效 ...
- CSS hack(过滤器)
CSS hack概念: 是针对不同浏览器对同一段代码解析不同的处理方案:<解决兼容性问题> 属性设置在不同版本的IE里会出现不兼容问题,css hack解决兼容主流浏览器和IE 常见的过滤 ...
- 【荐】说说CSS Hack 和向后兼容
人一旦习惯了某些东西就很难去改,以及各种各样的原因,新的浏览器越来越多,而老的总淘汰不了.增长总是快于消亡导致了浏览器兼容是成了谈不完的话题.说 到浏览器兼容,CSS HACK自然而然地被我们想起.今 ...
- css Hack 以及css的一些兼容问题小结
坚持每天做总结.今天下班还算早.写个跟css兼容有关的知识点.便于后期查看与学习.一.先说说各种主流浏览器的内核 浏览器最重要或者说核心的部分是“Rendering Engine”,可大概译为“渲染引 ...
随机推荐
- [SAP ABAP开发技术总结]预定义(内置)数据类型
声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...
- Spark ML聚类分析之k-means||
今天更新了电脑上的spark环境,因为上次运行新的流水线的时候,有的一些包在1.6.1中并不支持 只需要更改系统中用户的环境变量即可 然后在eclipse中新建pydev工程,执行环境是python3 ...
- Linux Shell Bash 带有特殊含义的退出码
linux在执行完一条命令后,使用 echo $? 会显示上一条命令是否执行成功,相关状态码如下 0为成功 表格 D-1. "保留的"退出码 退出码的值 含义 例子 注释 1 通用 ...
- 控制执行流程 Thinking in Java 第四章
4.1 true 和 false *Java 不允许将一个数字作为布尔类型(虽然在C和C++中可以),使用时需要条件表达式将其转换为布尔类型: 如下: if( a!= 0) 4.2 if-else 4 ...
- [转载] Linux下查看内存使用情况方法总结
原文: http://9iphp.com/linux/1247.html 强烈推荐 htop.
- html5 的draggable属性使用<转载收藏>
在HTML5中,已经支持在浏览器与其他应用程序之间的数据互相拖动,同时也大大简化了有关于拖放方面的代码. 实现拖放的步骤 在HTML5中要想实现拖放操作,至少要经过两个步骤: 将想要拖放的对象元素的d ...
- nginx相关优化
1.配置监控nginx状态信息 vim /usr/locale/nginx/conf/nginx.conf server { listen ; server_name 192.168.1.30; lo ...
- MyBatis——Mybatis缓存
原文:http://www.cnblogs.com/xdp-gacl/p/4270403.html MyBatis学习总结(七)--Mybatis缓存 一.MyBatis缓存介绍 正如大多数持久层框架 ...
- hiho_1070_RMQ
题目 区间最小值查询,但是支持对数组中的任意数字进行修改. 分析 采用RMQ_ST算法的O(1)算法不支持修改,因为每次修改都要重新设置动归数组.因此采用线段树解决,修改和查询的复杂度均为O(logN ...
- 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 ...