作為前端工程師的我們來說，IE對我們來說一定是不陌生的。在編寫代碼實現設計稿的時候，往往會出現各式各樣有關IE的兼容性問題。對於兼容性的處理，方法也有很多。最簡單的方法就是針對浏覽器寫不同的樣式。
IE中每個浏覽器都有一套屬於自己的注釋。屬於自己浏覽器的注釋會專門在自己的浏覽器中識別，而且他的浏覽器並不識別。下面我們將為大家揭曉條件樣式的編寫方法。
是HTML語言中的注釋。它是一種添加到代碼中的筆記，讓自己或你的團隊成員明白你寫的是什麼，寫到什麼時候等等信息，這種注釋並不會在浏覽器中顯示出來，但大家在查看頁面的源代碼時可以看到這一部分，如下面的一個簡單實例：
復制代碼代碼如下:
<!-- 這裡是HTML注釋 -->
<div>HTML注釋</div>
上面這段代碼中部分中的內容就是注釋部分了。那麼我們若在上面的基礎添加一個條件語句，就可以得到我們想要的條件注釋。IE就有專屬於自己的一套條件注釋。條件注釋的好處有很多，主要有讓你的網站樣式整潔清爽，其次是輕松兼容各個符合條件的浏覽器。這些好處讓我們瞬間對條件注釋有了很大的興趣。那麼條件注釋應該如何編寫呢?下面我就一起來看看吧。
條件樣式的編寫方法
方法很簡單，我們只需按正常的方法引入外部樣式表，然後在外面嵌套條件注釋即可。在具體使用條件注釋語句之前，有幾種條件注釋屬性含義我們必須要理解，並會使用：
1、gt(greate than):選擇條件版本以上版本，不包含條件版本本身;
2、lt(less than):這個剛好與gt相反，表示的是選擇條件版本以下的版本，不包含條件版本自身;
3、gte(greate than or equal):選擇條件版本以上版本，並包含條件版本自身;
4、lte(less than or equal):選擇條件版本以下的版本，並包含條件版本自身;
5、!:選擇條件版本以外所有版本，無論高低。
條件樣式的實例
1、支持所有IE浏覽器
復制代碼代碼如下:
<!--[if IE]>
<link rel="stylesheet" href="IE.css" type="text/css"/>
<![endif]-->
2、支持除IE外的所有浏覽器
復制代碼代碼如下:
<!--[if !IE]>
<link rel="stylesheet" href="noIE.css" type="text/css"/>
<![endif]-->
或
復制代碼代碼如下:
<!--[if !IE]><!-->
<link rel="stylesheet" href="noIE.css" type="text/css" />
<!--<![endif]-->
3、僅僅支持IE10
復制代碼代碼如下:
<!--[if IE 10]>
<link rel="stylesheet" type="text/css" href="IE10.css">
<![endif]-->
4、僅僅支持IE9
復制代碼代碼如下:
<!--[if IE 9]>
<link rel="stylesheet" type="text/css" href="IE9.css">
<![endif]-->
5、僅僅支持IE8
復制代碼代碼如下:
<!--[if IE 8]>
<link rel="stylesheet" type="text/css" href="IE8.css">
<![endif]-->
6、僅僅支持IE7
復制代碼代碼如下:
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="IE7.css">
<![endif]-->
7、僅僅支持IE6
復制代碼代碼如下:
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="IE6.css">
<![endif]-->
8、支持IE10以下版本(IE9以及IE9以下版本)
復制代碼代碼如下:
<!--[if lt IE 10]>
<link rel="stylesheet" type="text/css" href="ie9Down.css">
<![endif]-->
或
復制代碼代碼如下:
<!--[if lte IE 9]>
<link rel="stylesheet" type="text/css" href="ie9Down.css">
<![endif]-->
9、支持IE9以下版本(IE8以及IE8以下版本)
復制代碼代碼如下:
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="ie8Down.css">
<![endif]-->
或
復制代碼代碼如下:
<!--[if lte IE 8]>
<link rel="stylesheet" type="text/css" href="ie8Down.css">
<![endif]-->
10、支持IE8以下版本(IE7以及IE7以下版本)
復制代碼代碼如下:
<!--[if lt IE 8]>
<link rel="stylesheet" type="text/css" href="ie7Down.css">
<![endif]-->
或
復制代碼代碼如下:
<!--[if lte IE 7]>
<link rel="stylesheet" type="text/css" href="ie7Down.css">
<![endif]-->
11、支持IE7以下版本(IE6以及IE6以下版本)
復制代碼代碼如下:
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="ie6Down.css">
<![endif]-->
或
復制代碼代碼如下:
<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" href="ie6Down.css">
<![endif]-->
12、高於IE9的版本(IE10以及IE10以上版本)
復制代碼代碼如下:
<!--[if gt IE 9]>
<link rel="stylesheet" type="text/css" href="ie10Up.css">
<![endif]-->
或
復制代碼代碼如下:
<!--[if gte IE 10]>
<link rel="stylesheet" type="text/css" href="ie10Up.css">
<![endif]-->
13、高於IE8的版本(IE9以及IE9以上版本)
復制代碼代碼如下:
<!--[if gt IE 8]>
<link rel="stylesheet" type="text/css" href="ie9Up.css">
<![endif]-->
或
復制代碼代碼如下:
<!--[if gte IE 9]>
<link rel="stylesheet" type="text/css" href="ie9Up.css">
<![endif]-->
14、高於IE7的版本(IE8以及IE8以上版本)
復制代碼代碼如下:
<!--[if gt IE 7]>
<link rel="stylesheet" type="text/css" href="ie8Up.css">
<![endif]-->
或
復制代碼代碼如下:
<!--[if gte IE 8]>
<link rel="stylesheet" type="text/css" href="ie8Up.css">
<![endif]-->
15、高於IE6的版本(IE7以及IE7以上版本)
復制代碼代碼如下:
<!--[if gt IE 6]>
<link rel="stylesheet" type="text/css" href="ie7Up.css">
<![endif]-->
或
復制代碼代碼如下:
<!--[if gte IE 7]>
<link rel="stylesheet" type="text/css" href="ie7Up.css">
<![endif]-->
16、用條件注釋引用JavaScript標簽
復制代碼代碼如下:
<!--[if IE]>
<script type="text/javascript" src="IE.js"></script>
<![endif]-->
上面就是展示了如何創建條件注釋樣式，大家可以根據自己的需求使用其中的一種或是多種，最後總結一下條件注釋主要針對的是IE浏覽器，所以我們也把他稱作IE條件注釋。如此一來，我們管理給IE兼容寫的單獨樣式，就帶來了極大的方便與好處。有了條件注釋我們就可以輕松寫出條件樣式，就能解決個浏覽器中的問題了。條件注釋就為大家介紹到這裡。