CSS

css判斷ie版本才引用樣式或css文档

字號+ 編輯: 国内TP粉 修訂: 面向ICU 來源: 杨玲 2023-09-09 我要說兩句(0)

轉載自天極。

<!--[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實現了這個屬性,它可以有兩個值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裡條件性注釋的替代效果,各有各的使用場景,我們根據軟體的運行環境來選擇使用哪一種。


延伸閲讀:


“瀏覽器内核”主要指渲染引擎(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内核(代表:Safari、Chrome)


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的發展。


閲完此文,您的感想如何?
  • 有用

    0

  • 沒用

    0

  • 開心

    0

  • 憤怒

    0

  • 可憐

    0

1.如文章侵犯了您的版權,請發郵件通知本站,該文章將在24小時内刪除;
2.本站標注原創的文章,轉發時煩請注明來源;
3.交流群: 2702237 13835667

相關課文
  • 多個高度相同, 屬性inline-block的div,有的div沒有内容而有的div有内容,有内容的會下沉?

  • 讓整個網頁全局變成黑白色調的css代碼

  • CSS生成内容

  • CSS3外輪廓屬性

我要說說
網上賓友點評