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”,可大概译为“渲染引 ...
随机推荐
- 先来个xmpp学习连接
http://my.oschina.net/SoulJa/blog?catalog=3340253&temp=1468228088114 http://my.oschina.net/iOSli ...
- JAVA运算符和优先级
1.算术运算符: ++ 和 -- 既可以出现在操作数的左边,也可以出现在右边,但结果是不同,如: ①int a=5: int b=a++: #先把a赋给b,a再自增 ②int a=5: int b=+ ...
- Java——Java日期转Sql日期
import java.text.ParseException; import java.text.SimpleDateFormat; import java.util.Date; public cl ...
- 《Linux内核设计的艺术》学习笔记(五)INT 0x10中断
参考书籍: 1. <IBM-PC汇编语言程序设计> 2. http://www.ctyme.com/intr/int-10.htm ◆ 设置显示方式: 功能号:AH = 00H 调用参 ...
- Python跳过第一行读取文件内容
Python编程时,经常需要跳过第一行读取文件内容.比较容易想到是为每行设置一个line_num,然后判断line_num是否为1,如果不等于1,则进行读取操作.相应的Python代码如下: inpu ...
- MVC3远程验证
public class StudentModel { [Display(Name="学生编号")] public int StuId { set; get; } [Require ...
- ubuntu的dns设置
ubuntu的dns设置为: dns-nameservers 8.8.8.8 注意不要少s
- Spring对hibernate的事物管理
把Hibernate用到的数据源Datasource,Hibernate的SessionFactory实例,事务管理器HibernateTransactionManager,都交给Spring管理.一 ...
- MediaPlayer的生命周期
- Linux socket编程应用学习笔记
参考这个系列吧 http://www.cnblogs.com/wunaozai/tag/%E7%BD%91%E7%BB%9C%E7%BC%96%E7%A8%8B/default.html?page=2 ...