1. 条件注释语句

<!--[if !IE]><!--> 除IE外都可识别 <!--<![endif]-->
<!--[if IE]> 所有的IE可识别 <![endif]-->
<!--[if IE 6]> 仅IE6可识别 <![endif]-->
<!--[if lt IE 6]> IE6以及IE6以下版本可识别 <![endif]-->
<!--[if gte IE 6]> IE6以及IE6以上版本可识别 <![endif]-->
<!--[if IE 7]> 仅IE7可识别 <![endif]-->
<!--[if lt IE 7]> IE7以及IE7以下版本可识别 <![endif]-->
<!--[if gte IE 7]> IE7以及IE7以上版本可识别 <![endif]-->
<!--[if IE 8]> 仅IE8可识别 <![endif]-->
<!--[if IE 9]> 仅IE9可识别 <![endif]-->

 

2. CSS hack 写法

/* 所有浏览器 通用*/
height: 100px; /* IE6 专用 */
_height: 100px; /* IE6 专用 */
*height: 100px; /* IE7 专用 */
*+height: 100px; /* IE7、FF 共用 */
height: 100px !important; /* IE6 7 8 9 10通用 */ height: 100px\9;

(1)*:  IE6+IE7都能识别*,而标准浏览器FF+IE8是不能识别*的;

(2)!important: 除IE6不能识别 !important外,  FF+IE8+IE7都能识别!important ;

(3)_ : 除IE6支持_ 外,  FF+IE8+IE7都不支持_;

(4)\9:所有IE浏览器都识别(IE6、IE7、IE8、IE9)

.test{ /* 1. */
/* color:#09F\0; 以前是IE8/9, 现在10也支持 */
color:#09F\0/; /* 以前是IE8 only, 现在IE9/10也支持. 如要排除IE9需要使用下面的rule重设IE9样式 */
}
@media all and (min-width:0) { /* 2. */
.test{color:red\9; }/* IE9 only, 现在IE10也支持 */
/* Ps:老外的方法都是\0,根本没考虑Opera */
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { /* 3. */
.test { color: green; } /* IE10+ */
}
:root .test { color:#963\9; } /* 以前IE9 only, 现在10也支持, 优先级高于@media, 优先级太高, 尽量少用 */

 

3. 识别IE10

1) 特性检测:@cc_on

我们可以用IE私有的条件编译(conditional compilation)结合条件注释来提供针对ie10的Hack:该脚本里面的IE排除条件注释,以确保IE6-9不承认它,然后它功能检测到了名为@ cc_on。在这里:

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<!--[if !IE]><!--<script>
if (/*@cc_on!@*/false) {
document.documentElement.className+=' ie10';
}
</script><!--<![endif]-->
</body>
</html>

用法

.ie10 .example {
/* IE10-only styles go here */
}

2)@media -ms-high-contrast

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

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

3) @media 0

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

 

参考:

http://feilong.org/ie7-ie8-ie6-firefox-css-hack

http://www.fantxi.com/blog/archives/ie8-ie9-css-hack/

http://www.wufangbo.com/ie10-css-hack/

IE 兼容性写法的更多相关文章

  1. 常用原生JS方法总结(兼容性写法)

    经常会用到原生JS来写前端...但是原生JS的一些方法在适应各个浏览器的时候写法有的也不怎么一样的... 今天下班有点累... 就来总结一下简单的东西吧…… 备注:一下的方法都是包裹在一个EventU ...

  2. css各浏览器的兼容性写法

    各浏览器下的兼容性写法 老版Chrome     -webkit-xxx FF                  -moz-xxx IE9                 -ms-xxx opera ...

  3. 常用原生JS兼容性写法汇总

    1.添加事件方法 addHandler:function(element,type,handler){ if(element.addEventListener){//检测是否为DOM2级方法 elem ...

  4. Javascript selection的兼容性写法介绍

    本文为大家讲解下Javascript selection的兼容性写法,感兴趣的朋友可以参考下 function getSelectedText() { //this function code is ...

  5. JavaScript数组方法的兼容性写法 汇总:indexOf()、forEach()、map()、filter()、some()、every()

    ECMA Script5中数组方法如indexOf().forEach().map().filter().some()并不支持IE6-8,但是国内依然有一大部分用户使用IE6-8,而以上数组方法又确实 ...

  6. CSS- ie6,ie7,ie8 兼容性写法,CSS hack写法

    css ie6,ie7,ie8 兼容性写法,CSS hack写法 margin-bottom:40px;       /*ff的属性*/margin-bottom:140px\9;    /* IE6 ...

  7. javascript解决getElementById()的bug以及getElementsByClassName的兼容性写法

    <a name="target" href="#">链接</a> <p id="target">文字说明 ...

  8. js 的一些兼容性写法

    ①添加事件方法 addHandler:function(element,type,handler){     if(element.addEventListener){//检测是否为DOM2级方法   ...

  9. addEventListener和attachEvent介绍, 原生js和jquery的兼容性写法

    也许很多同仁一听到事件监听,第一想到的就是原生js的 addEventListener()事件,的确如此,当然如果只是适用于现代浏览器(IE9.10.11 | ff, chorme, safari, ...

  10. JavaScript 事件兼容性写法

    1.以下是JavaScript事件兼容性写法,使用者可以随意使用,兼容所有浏览器.包括IE6(亲测) <!DOCTYPE html> <html> <head> & ...

随机推荐

  1. Python得到前面12个月的数据,Python得到现在时间 前一年的数据,

    #Python 实现得到现在时间12个月前的每个月 # 假设现在的时间是2016年9月25日 #得到现在的时间 得到now等于2016年9月25日 now = datetime.datetime.no ...

  2. psycopg2.pool – Connections pooling / psycopg2.pool – 连接池 / postgresql 连接池

    创建新的PostgreSQL连接可以是一个昂贵的操作.这个模块提供了一些纯Python类直接在客户端应用程序实现简单的连接池.      class psycopg2.pool.AbstractCon ...

  3. appium安装

    appium 这个移动端的自动化测试框架.是神器啊.selenium系列的工具.webdirver是一个使用很广泛的自动化测试框架. 至于API 测试,等,使用代码做单元测试就好了,各种框架很多,只要 ...

  4. Open_Newtonsoft_Json 的序列化和反序列化

    Newtonsoft.Json,一款.NET中开源的Json序列化和反序列化类库(下载地址http://json.codeplex.com/). 特别注明:本人转自 陈 晨 博客园的 Newtonso ...

  5. java-基础练习题3

    [程序3] 题目:打印出所有的"水仙花数",所谓"水仙花数"是指一个三位数,其各位数字立方和等于该数本身.例如:153是一个"水仙花数",因 ...

  6. 注意map<> 的[]

    其实在之前一篇关于map的基本操作中已经提到过注意[]操作,这里再强调一下. 先看下面的程序: #include<iostream> #include<map> using n ...

  7. 通过两个GPS计算两个GPS点的距离

    public static double GetDistance(double lat1, double lng1, double lat2, double lng2) { double radLat ...

  8. 转:Android ViewPager多页面滑动切换以及动画效果

    一.首先,我们来看一下效果图,这是新浪微博的Tab滑动效果.我们可以手势滑动,也可以点击上面的头标进行切换.与此同方式, 白色横条会移动到相应的页卡头标下.这是一个动画效果,白条是缓慢滑动过去的.好了 ...

  9. JAVA WEB项目中使用并改造editor.md实现Markdown编辑器

    Markdown和Editor.md简介 Markdwon编辑器在技术工作者圈子中已经越来越流行,简单的语法,统一的格式,强大的扩展功能,最重要的是:你可以用Markdown,设计一篇精彩绝伦的文档而 ...

  10. 线程——委托InvokeRequired和Invoke

    C#中禁止跨线程直接访问控件,InvokeRequired是为了解决这个问题而产生的,当一个控件的InvokeRequired属性值为真时,说明有一个创建它以外的线程想访问它.此时它将会在内部调用ne ...