【CSS】判斷瀏覽器的不同加載不同CSS

瀏覽器的相容性問題，經常困擾著網頁設計師，而不同的瀏覽器對於CSS支援也不同，可配合條件註解的方式，去判斷瀏覽器，以讀取適合的CSS檔案。

語法︰

<!--[if IE 6]>      //IE瀏覽器版本6                    

<link rel="stylesheet" href="css/styleIE6.css" type="text/css" media="screen"/>

<![endif]-->

<!--[if IE 7]>      //IE瀏覽器版本7 

<link rel="stylesheet" href="css/styleIE7.css" type="text/css" media="screen"/>

<![endif]-->

<!--[if IE 8]>      //IE瀏覽器版本8

<link rel="stylesheet" href="css/styleIE8.css" type="text/css" media="screen"/>

<![endif]-->

<!--[if IE 9]>      //IE瀏覽器版本9

<link rel="stylesheet" href="css/styleIE9.css" type="text/css" media="screen"/>

<![endif]-->

<!--[if !IE]> -->   //瀏覽器 不是 IE

<link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>

<!-- <![endif]-->

參數

lte︰小於或等於

lt︰小於

gte︰大於或等於

gt︰大於

!︰不等於

加入參數語法︰

<!--[if lte IE 9]>                   //IE 瀏覽器版本低於9

<link rel="stylesheet" href="css/abIE9.css" type="text/css" media="screen"/>

<![endif]-->

<!--[if IE 8 | IE 9]>              //只出現於 IE8 或 IE9 才會顯示的判斷方式。

<link rel="stylesheet" href="css/IE8_9.css" type="text/css" media="screen"/>

<![endif]-->

 

**[if IE 10]**

[if IE 10] IE10 結果顯示 不是 IE ? 判斷方式有變化。

以下是找到的方式。但不知與 XML 語法使用時是否會有衝突。

<xml>

此段在 XML 標籤內將只針對 IE 10 的瀏覽器和其他的瀏覽器。在 IE 9/8/7 瀏覽器則不顯示出來。

</xml>

參考引用︰

http://www.eion.com.tw/Blogger/?Pid=1123

瀏覽器判斷 IE 版本條件式的語法 [if IE]..![endif]