IE 兼容性寫法

時間 2019-11-12

標籤兼容性寫法简体版

原文原文鏈接

1. 條件註釋語句css

<!--[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 寫法html

/* 全部瀏覽器 通用*/
height: 100px;  
 
/* IE6 專用 */
_height: 100px;
 
/* IE6 專用 */
*height: 100px;  
 
/* IE7 專用 */
*+height: 100px;
 
/* IE七、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 ;spa

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

(4)\9:全部IE瀏覽器都識別(IE六、IE七、IE八、IE9)code

.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. 識別IE10htm

1) 特性檢測：@cc_onblog

咱們能夠用IE私有的條件編譯(conditional compilation)結合條件註釋來提供針對ie10的Hack：該腳本里面的IE排除條件註釋，以確保IE6-9不認可它，而後它功能檢測到了名爲@ cc_on。在這裏：ip

<!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>

用法utf-8

.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/

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。