IE10/11不支援條件性註釋後的替代方法

webhek發表於2016-03-31
IE10

　　專門針對IE的條件性註釋(Conditional comments)是個很奇葩的東西，它是專門給IE瀏覽器準備的，因為其它瀏覽器根本不能識別這種標記。之所以需要這種東西，是因為IE實現的網頁渲染效果和其它瀏覽器又很多出入，使用條件性註釋可以區別對待的針對瀏覽器編寫CSS等程式碼。

<!--[if IE]>
<link href="ie.css" rel="stylesheet">
<![endif]-->
<!--[if IE6]>
<style type="text/css">
/* styles for IE6 goes here */
</style>
<![endif]-->
<!--[if lt IE7]>
<style type="text/css">
/* styles for IE7 goes here */
</style>
<![endif]-->
<!--[if lte IE8]>
<style type="text/css">
/* styles for IE8 goes here */
</style>
<![endif]-->
<!--[if gt IE9]>
<style type="text/css">
/* styles for IE9 goes here */
</style>
<![endif]-->
<!--[if gte IE9]>
<style type="text/css">
/* styles for IE9 goes here */
</style>
<![endif]-->
<!--[if !IE]> -->
<style type="text/css">
/* styles goes here but should not appear in IE5-9 */
</style>
<!-- <![endif]-->

　　但當IE的版本到到達10/11後，開始不支援這種條件性註釋(MSDN上的說明)。

　　說來也合情合理，從IE9開始，IE開始被WEB開發人員接受，很多人將IE9後的瀏覽器和火狐、谷歌瀏覽器統稱為現代瀏覽器，因為它們開始實現新的HTML5和CSS3統一標準。但願望是美好的，現實卻是殘酷的，很多WEB開發人員在開發實踐中發現，同一個CSS在IE9/10/11上顯示的效果和其它瀏覽器渲染的效果還是不一樣。也就是說，我們還是需要條件性註釋。

　　那麼，在不支援條件性註釋的IE10/11上，如何實現條件性註釋的效果呢？

　方法一：使用IE=EmulateIE9屬性指示瀏覽器採用IE9渲染技術

　　IE9是支援條件性註釋的。

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9">

　　在html網頁的head里加入上面的元標記，這樣IE10/11就能識別條件性註釋了，我們也就可以像IE6/7/8那樣編寫針對性的CSS程式碼了。但這樣做有個弊端，很顯然，瀏覽器這樣就會才能IE9的渲染模式，而不是最新的IE10/11技術。

　方法二：使用媒體查詢語句+-ms-high-contrast屬性

　　CSS的媒體查詢語句(media query)是一種高階的CSS條件語句，它能根據一些屬性和屬性值計算判斷CSS是否可以生效。在這裡，我們要使用一個IE10/11獨有的屬性，它就是-ms-high-contrast，只有IE10/11實現了這個屬性，它可以有兩個值active或none，使用下面的媒體查詢語句：

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

　　火狐瀏覽器、谷歌瀏覽器不能識別這個屬性，所以不會執行這個查詢語句裡的CSS，從而實現了條件性執行的效果。

　方法三：使用Javascript判斷瀏覽器的型別

　　先用JavaSCript判斷是否是IE瀏覽器，如果是，就在頁面的<html>標記上新增一個“ie”的類名：

var ms_ie = false;
var ua = window.navigator.userAgent;
var old_ie = ua.indexOf('MSIE ');
var new_ie = ua.indexOf('Trident/');
    
if ((old_ie > -1) || (new_ie > -1)) {
    ms_ie = true;
}
    
if ( ms_ie ) {
   document.documentElement.className += " ie";
}

　　有了這個標誌性css class後，我們就可以在CSS裡區別性的編寫css程式碼了。

.testClass{
    /*這裡寫通用的css*/ 
}

.ie .testClass{
    /*這裡寫專門針對IE的css*/
}

　　這三種方法都能實現在IE10/11裡條件性註釋的替代效果，各有各的使用場景，我們根據軟體的執行環境來選擇使用哪一種。

　　歡迎提出意見。

相關文章