码迷,mamicode.com
首页 > 其他好文 > 详细

IE 兼容性写法

时间:2014-08-25 20:47:34      阅读:340      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   color   os   使用   io   strong   ar   

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 兼容性写法

标签:style   blog   http   color   os   使用   io   strong   ar   

原文地址:http://www.cnblogs.com/cxp9876/p/3935675.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!