[if IE] 在IE10 或者是 IE11以及以上 中無效的解決方案

如果你的瀏覽器是IE11,頁面中頭部

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

那麼用這個判斷是無效的。

<!--[if IE]>

            <style type="text/css">
                body{ background: red;}
            </style>
         
<![endif]-->

 

如果你是IE11的話,如何讓這個判斷有效果?手動F12仿真--》文檔模式 切換到IE9,這個操作證明,IE條件判斷,在低版本中是有效果的。

後來查到微軟官方 https://msdn.microsoft.com/en-us/library/hh801214(v=vs.85).aspx 

官方聲明說了2個方面:

一,IE10以及以上版本,不在支持這種條件注視,

二,解決辦法如下:

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

在頁面中,meta 渲染模型改爲IE9。

 

 

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

IE9是支持條件性註釋的。

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

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9">
		<title>運行環境IE11</title>
	</head>
	<body>
		
		
		
		<!--[if IE]>

	     <style type="text/css">
                 body{ background: orange;}
	        	
	        </style>
         
        <![endif]-->
		
	</body>
</html>

方法二:使用媒體查詢語句+-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;
     alert("IE瀏覽器")
}
    
if ( ms_ie ) {
   document.documentElement.className += " ie";
}

有了這個標誌性css class後,我們就可以在CSS裏區別性的編寫css代碼了。

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

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

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

僅IE6和IE7識別

@media screen\9 {   .selector {  property: value; } }  
僅IE6和IE7、IE8識別

@media \0screen\,screen\9 {   .selector {  property: value; } } 
僅IE8識別

@media \0screen {   .selector {  property: value; } } 
僅IE8-10識別

@media screen\0 {   .selector {  property: value; } }  
僅IE9和IE10識別

@media screen and (min-width:0\0) {   .selector {  property: value; } }  
僅IE10/11識別

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

以上部分內容來之IE10/11不支持條件性註釋後的替代方法 http://www.webhek.com/conditional-comments-in-ie11-10

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章