web開發中如何實現條件注釋樣式

小編給大家分享一下web開發中如何實現條件注釋樣式，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

作為前端工程師的我們來說，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兼容寫的單獨樣式，就帶來了極大的方便與好處。有了條件注釋我們就可以輕松寫出條件樣式，就能解決個瀏覽器中的問題了。

以上是“web開發中如何實現條件注釋樣式”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！