1. 程式人生 > >css判斷ie版本才引用樣式或css檔案

css判斷ie版本才引用樣式或css檔案

<!--[if !IE]><!--> 除IE外都可識別 <!--<![endif]-->
<!--[if IE]> 所有的IE可識別 <![endif]-->
<!--[if IE 6]> 僅IE6可識別 <![endif]-->
<!--[if lt IE 6]> IE6以下版本可識別 <![endif]-->
<!--[if lte IE 6]> IE6以及IE6以下版本可識別 <![endif]-->

<!--[if gte IE 6]> IE6以及IE6以上版本可識別 <![endif]-->
<!--[if IE 7]> 僅IE7可識別 <![endif]-->
<!--[if lt IE 7]> IE7以下版本可識別 <![endif]-->
<!--[if gte IE 7]> IE7以及IE7以上版本可識別 <![endif]-->
<!--[if IE 8]> 僅IE8可識別 <![endif]-->
<!--[if IE 9]> 僅IE9可識別 <![endif]-->
如:
<!--[if IE 9]>
<link rel="stylesheet" type="text/css" href="ie9.css"/>
<![endif]-->
<!--[if IE 9]>
<style>
.header-menu>li{
				color:#fff;
}
</style>
<![endif]-->

IE10/11不支援條件性註釋後的

替代方法

專門針對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實現了這個屬性,它可以有兩個值activenone,使用下面的媒體查詢語句:

@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裡條件性註釋的替代效果,各有各的使用場景,我們根據軟體的執行環境來選擇使用哪一種。

延伸閱讀: 

“瀏覽器核心”主要指渲染引擎(Rendering Engine),負責解析網頁語法(如HTML、JavaScript)並渲染、展示網頁。因此,所謂的瀏覽器核心通常也就是指瀏覽器所採用的渲染引擎,渲染引擎決定了瀏覽器如何顯示網頁的內容以及頁面的格式資訊。不同的瀏覽器核心對網頁編寫語法的解析也有所不同,因此同一網頁在不同的核心瀏覽器裡的渲染、展示效果也可能不同。

  瀏覽器核心種類繁多,商用的加上非商業的免費核心,大約會超過10款,我們今天重點看一下目前主流的四大瀏覽器核心Trident、Gecko、WebKit以及Presto。

瞭解網頁瀏覽器四種主要核心

  一、Trident核心(代表:Internet Explorer)

  說起Trident,很多人都會感到陌生,但提起IE(Internet Explorer)則無人不知無人不曉,由於其被包含在全世界使用率最高的作業系統Windows中,得到了極高的市場佔有率,所以我們又經常稱其為IE核心。

  Trident(又稱為MSHTML),是微軟開發的一種排版引擎。它在1997年10月與IE4一起誕生,一直在被不斷地更新和完善。而且除IE外,許多產品都在使用Trident核心,比如Windows的Help程式、RealPlayer、Windows Media Player、Windows Live Messenger、Outlook Express等等都使用了Trident技術。

  Trident實際上是一款開放的核心,Trident引擎被設計成一個軟體模組,使得其他軟體開發人員很容易將網頁瀏覽功能加到他們自行開發的應用程式裡,其介面核心設計相當成熟,因此湧現出許多采用IE核心而非IE的瀏覽器,但是Trident只能用於Windows平臺。使用Trident渲染引擎的瀏覽器包括:IE、傲遊、世界之窗瀏覽器、Avant、騰訊TT、Sleipnir、GOSURF、GreenBrowser和KKman等。

  二、Gecko核心(代表:Mozilla Firefox)

  Gecko是開放原始碼、以C++編寫的網頁排版引擎,目前被Mozilla家族網頁瀏覽器以及Netscape 6以後版本瀏覽器所使用。這款軟體原本是由網景通訊公司開發的,現在則由Mozilla基金會維護。由於Gecko的特點是程式碼完全公開,因此,其可開發程度很高,全世界的程式設計師都可以為其編寫程式碼,增加功能。因為這是個開源核心,因此受到許多人的青睞,採用Gecko核心的瀏覽器也很多,這也是Gecko核心雖然年輕但市場佔有率能夠迅速提高的重要原因。

  Gecko排版引擎提供了一個豐富的程式介面以供與網際網路相關的應用程式使用,例如網頁瀏覽器、HTML編輯器、客戶端/伺服器等。雖然最初的主要物件是Mozilla的衍生產品,如Netscape和Mozilla Firefox,但是現在已有很多其他軟體利用這個排版引擎。此外Gecko也是一個跨平臺核心,可以在Windows、BSD、Linux和Mac OS X中使用。

  正在和曾經使用Gecko引擎的瀏覽器有Firefox、網景6~9、SeaMonkey、Camino、Mozilla、Flock、Galeon、K-Meleon、Minimo、Sleipni、Songbird、XeroBank。Google Gadget引擎採用的就是Gecko瀏覽器引擎。

  WebKit 是一個開放原始碼的瀏覽器引擎(Web Browser Engine),WebKit最初的程式碼來自KDE的KHTML和KJS(它們均為開放原始碼,都是自由軟體,在GPL協議下授權)。所以WebKit也是自由軟體,同時開放原始碼。它的特點在於原始碼結構清晰、渲染速度極快。主要代表產品有Safari和Google的瀏覽器Chrome。

  WebKit核心在手機上的應用也十分廣泛,例如Google的Android平臺瀏覽器、Apple的iPhone瀏覽器、Nokia S60瀏覽器等所使用的瀏覽器核心引擎,都是基於WebKit引擎的。 WebKit核心也廣泛應用於Widget引擎產品,包括中國移動的BAE、Apple的Dashboard以及Nokia WRT在內採用的均為WebKit引擎。

  四、Presto核心(代表:Opera

  Presto是由Opera Software開發的瀏覽器排版引擎,供Opera 7.0及以上使用。它取代了舊版Opera 4至6版本使用的Elektra排版引擎,包括加入動態功能,例如網頁或其部分可隨著DOM及Script語法的事件而重新排版。Presto的特點就是渲染速度的優化達到了極致,它是目前公認的網頁瀏覽速度最快的瀏覽器核心,然而代價是犧牲了網頁的相容性。

  Presto實際上是一個動態核心,與Trident、Gecko等核心的最大區別就在於指令碼處理上,Presto有著天生的優勢,頁面的全部或者部分都能夠在迴應指令碼事件時等情況下被重新解析。此外該核心在執行JavaScript時有著最快的速度,根據同等條件下的測試,Presto核心執行同等JavaScript所需的時間僅有Trident和Gecko核心的約1/3。Presto是商業引擎,了Opera以外較少瀏覽器使用Presto核心,這在一定程度上限制了Presto的發展。

作者:天極軟體責任編輯:楊玲)參考網站: