欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

瀏覽器兼容之旅第一站:如何在頁面中創(chuàng)建IE條件注釋

  發(fā)布時間：2012-12-27 12:46:34   作者：佚名   我要評論
瀏覽器的兼容問題一定處理過不少了，特別是IE6的兼容問題;這一節(jié)主要了解了如何在頁面中創(chuàng)建IE條件注釋,以及其帶來的好處，和所起的作用,需要了解的朋友可以參考下

IE對于大家來說一定很熟悉了，作為一名Web前端開發(fā)人員或者是說前端攻程師來說，瀏覽器的兼容問題一定處理過不少了，特別是IE6的兼容問題，如果你的用戶是針對中國市場來說，IE6下的效果是必須得處理了，一個讓人頭痛而又不得不去面對的一件事情，特別是對于剛接觸CSS的童子們，更讓無從下手，那么今天我重新開始針對瀏覽器的兼容問題，說說一些我自己的經(jīng)驗，以及盡可能多的搜集相關(guān)經(jīng)典問題的處理方法。希望能對有需要的朋友有所幫助。

中國古語——萬物都是相生相克的。這句話用到我們寫CSS的人身上也是一樣的，不管在哪個瀏覽器下，出現(xiàn)了問題，首先要追究的問題是我們自己怕HTML結(jié)構(gòu)和CSS樣式有沒有出問題，然后在看看是不是因為瀏覽器各自的解析不同而造成的。千萬不要一看到IE出問題，就罵上了ＩＥ，其實人家并不是那么差勁，另外有一點也需要注意的就是，不要動不動就使用你知道的HACK手段來解決各瀏覽器的兼容問題。小生有自己的一個原則——“處理各瀏覽器的兼容問題，未到情非得以的情況下才使用HACK”。

開頭來了一大段的開場白，下面我們就開始我們的旅行——瀏覽器兼容之旅的第一站：如何創(chuàng)建條件樣式。
大家都知道<!-- -- >是HTML語言中的注釋。它是一種添加到代碼中的筆記，讓自己或你的團隊成員明白你寫的是什么，寫到什么時候等等信息，這種注釋并不會在瀏覽器中顯示出來，但大家在查看頁面的源代碼時可以看到這一部分，如下面的一個簡單實例

復(fù)制代碼
代碼如下:

<div id="header" >Header Section </div>
<!-- End Header Section Content -- >

那么我們在上面的基礎(chǔ)是增加一個條件語句，我們就可以使用條件注釋，我們在平時用到的就是IE的有條件注釋。IE的有條件注釋是一種專有的（非標準的）、對常規(guī)(X)HTML注釋的Miscrosoft擴展。換句話說，有條件注釋使你能夠根據(jù)條件（比如說瀏覽器的版本）顯示代碼塊。盡管是非標準的，但是有條件注釋對于其他所有瀏覽器作為常規(guī)注釋出現(xiàn),因此本質(zhì)上是無害的。有條件注釋在 Windows 上的 IE5 中首次出現(xiàn),并且得到了 Widnows 瀏覽器所有后續(xù)版本的支持。

那么為什么要創(chuàng)建條件樣式呢？言外之意我們創(chuàng)建條件樣式有什么好處呢？創(chuàng)建條件樣式優(yōu)點在于：可以將部分兼容代碼識讓符合條件的瀏覽器識別；其二讓你的主要樣式表整潔，清爽。不過大家要記住，雖然我們這里說的是創(chuàng)建有條件樣式，但這種條件注釋標簽的使用不僅僅只能用于CSS，你可以應(yīng)用在javaScript中，他們甚至可以在您的網(wǎng)站內(nèi)容顯示特殊的IE瀏覽器特定的消息。下面我們一起來看看其具體的應(yīng)用，和使用方法。

調(diào)用條件樣式的方法
我們調(diào)用條件樣式方法和<link>標簽一樣，常常放置在<head>標簽中。和前面所見識的普通注釋不一樣的是，這里需要加上條件判斷，具體格式如下所示：

復(fù)制代碼
代碼如下:

<!--[if IE] >
...
<![endif]-->

在具體使用條件注釋語句之前，有幾種條件注釋屬性含義我們必須要理解：
gt(greate than): 選擇條件版本以上版本，不包含條件版本本身；
lt(less than): 這個剛好與gt相反，表示的是選擇條件版本以下的版本，不包含條件版本自身；
gte(greate than or equal): 選擇條件版本以上版本，并包含條件版本自身；
lte(less than or equal): 選擇條件版本以下的版本，并包含條件版本自身；
!:選擇條件版本以外所有版本，無論高低。

條件樣式的使用方法
下面我們一起來看針對不同版本如何使用條件樣式
1、支持所有IE瀏覽器

復(fù)制代碼
代碼如下:

<!--[if IE] >
<link rel="stylesheet" href="all-ie-only.css" type="text/css"/ >
<![endif]-->

2、支持除IE外的所有瀏覽器

復(fù)制代碼
代碼如下:

<!--[if !IE] >
<link rel="stylesheet" href="not-ie.css" type="text/css"/ >
<![endif]-->

上面是除了IE瀏覽器外所有瀏覽器都識別這個樣式，另外CSS-TRICKS的《How To Create an IE-Only Stylesheet 》一文中提供了另一種寫法：

復(fù)制代碼
代碼如下:

<!--[if !IE] ><!-->
<link rel="stylesheet" type="text/css" href="not-ie.css" / >
<!--<![endif]-->

3、僅僅支持IE10

復(fù)制代碼
代碼如下:

<!--[if IE 10] >
<link rel="stylesheet" type="text/css" href="ie10.css" >
<![endif]-->

4、僅僅支持IE9

復(fù)制代碼
代碼如下:

<!--[if IE 9] >
<link rel="stylesheet" type="text/css" href="ie9.css" >
<![endif]-->

5、僅僅支持IE8

復(fù)制代碼
代碼如下:

<!--[if IE 8] >
<link rel="stylesheet" type="text/css" href="ie8.css" >
<![endif]-->

6、僅僅支持IE7

復(fù)制代碼
代碼如下:

<!--[if IE 7] >
<link rel="stylesheet" type="text/css" href="ie7.css" >
<![endif]-->

7、僅僅支持IE6

復(fù)制代碼
代碼如下:

<!--[if IE 6] >
<link rel="stylesheet" type="text/css" href="ie6.css" >
<![endif]-->

8、支持IE10以下版本（IE9以及IE9以下版本）
這種方法是樣式表使用在低于IE10的瀏覽器,換句話說除了IE10以外的所有IE版本都將被支持。

復(fù)制代碼
代碼如下:

<!--[if lt IE 10] >
<link rel="stylesheet" type="text/css" href="ie9-and-down.css" >
<![endif]-->

也可以寫成

復(fù)制代碼
代碼如下:

<!--[if lte IE 9] >
<link rel="stylesheet" type="text/css" href="ie9-and-down.css" >
<![endif]-->

前面我們也說過了lt和lte的區(qū)別,lt表示小于版本號，不包括條件版本號本身；而lte是小于或等于版本號，包括了版本號自身。
9、支持IE9以下版本（IE8以及IE8以下版本）

復(fù)制代碼
代碼如下:

<!--[if lt IE 9] >
<link rel="stylesheet" type="text/css" href="ie8-and-down.css" >
<![endif]-->

或：

復(fù)制代碼
代碼如下:

<!--[if lte IE 8] >
<link rel="stylesheet" type="text/css" href="ie8-and-down.css" >
<![endif]-->

10、支持IE8以下版本（IE7以及IE7以下版本）

復(fù)制代碼
代碼如下:

<!--[if lt IE 8] >
<link rel="stylesheet" type="text/css" href="ie7-and-down.css" >
<![endif]-->

或：

復(fù)制代碼
代碼如下:

<!--[if lte IE 7] >
<link rel="stylesheet" type="text/css" href="ie7-and-down.css" >
<![endif]-->

11、支持IE7以下版本（IE6以及IE6以下版本）

復(fù)制代碼
代碼如下:

<!--[if lt IE 7] >
<link rel="stylesheet" type="text/css" href="ie6-and-down.css" >
<![endif]-->

或：

復(fù)制代碼
代碼如下:

<!--[if lte IE 6] >
<link rel="stylesheet" type="text/css" href="ie6-and-down.css" >
<![endif]-->

上面8——11這幾種方法，使用的是低于（lt）和低于或等于（lte）的方法來判斷，我們也可以使用大于（gt）和大于或等于（gte）達到上面的效果：
12、高于IE9的版本(IE10以及IE10以上版本)

復(fù)制代碼
代碼如下:

<!--[if gt IE 9] >
<link rel="stylesheet" type="text/css" href="ie10-and-up.css" >
<![endif]-->

或：

復(fù)制代碼
代碼如下:

<!--[if gte IE 10] >
<link rel="stylesheet" type="text/css" href="ie10-and-up.css" >
<![endif]-->

13、高于IE8的版本(IE9以及IE9以上版本)

復(fù)制代碼
代碼如下:

<!--[if gt IE 8] >
<link rel="stylesheet" type="text/css" href="ie9-and-up.css" >
<![endif]-->

或：

復(fù)制代碼
代碼如下:

<!--[if gte IE 9] >
<link rel="stylesheet" type="text/css" href="ie9-and-up.css" >
<![endif]-->

14、高于IE7的版本(IE8以及IE8以上版本)

復(fù)制代碼
代碼如下:

<!--[if gt IE 7] >
<link rel="stylesheet" type="text/css" href="ie8-and-up.css" >
<![endif]-->

或：

復(fù)制代碼
代碼如下:

<!--[if gte IE 8] >
<link rel="stylesheet" type="text/css" href="ie8-and-up.css" >
<![endif]-->

15、高于IE6的版本(IE7以及IE7以上版本)

復(fù)制代碼
代碼如下:

<!--[if gt IE 6] >
<link rel="stylesheet" type="text/css" href="ie7-and-up.css" >
<![endif]-->

或：

復(fù)制代碼
代碼如下:

<!--[if gte IE 7] >
<link rel="stylesheet" type="text/css" href="ie7-and-up.css" >
<![endif]-->

16、高于IE5.5的版本(IE6以及IE6以上版本)

復(fù)制代碼
代碼如下:

<!--[if gt IE 5.5] >
<link rel="stylesheet" type="text/css" href="ie6-and-up.css" >
<![endif]-->

或：

復(fù)制代碼
代碼如下:

<!--[if gte IE 6] >
<link rel="stylesheet" type="text/css" href="ie6-and-up.css" >
<![endif]-->

12-16幾種方式剛好和8-11幾方式相反，我們此處使用的是“gt”和“gte”，“gt”剛好和“lt”相反，表示的是大于條件版本號，不包括版本號本身；而“gte”則和"lte"相反，表示的是大于或等于條件版本號，包括了條件版本自身。一共羅列了16種條件注釋所表達的含義，大家要呵以根據(jù)平時的應(yīng)用對比參照一下，如果從未接觸的朋友，可以動手嘗試一下，動手能豐衣足食嘛。
上面就是展示了如何創(chuàng)建條件注釋樣式，大家可以根據(jù)自己的需求使用其中的一種或是多種，最后總結(jié)一下條件注釋主要針對的是IE瀏覽器，所以我們也把他稱作IE條件注釋。另外IE條件注釋只有IE5以上的版本才開始支持IE條件注釋，所以“只有ＩＥ”才能識別，換句話說，只有IE5版本以上才能識別IE條件注釋。如此一來，我們管理給IE兼容寫的單獨樣式，就帶來了極大的方便與好處。最后有一點需要提出的是：“IE的條件注釋不單單針對樣式，我們也可以針對于javascrit或者其字的注釋說明”。最后我們在來看一個IE條件注釋應(yīng)用在javaScript的實例：

復(fù)制代碼
代碼如下:

<!--[if IE 6] >
<script type="text/javascript" src="js/pngfix.js" ></script>
<script type="text/javascript" src="js/ie6.js" ></script>
<![endif]-->

這一節(jié)主要了解了如何在頁面中創(chuàng)建IE條件注釋,以及其帶來的好處，和所起的作用。那么下一節(jié)將進入瀏覽器兼容之旅第二站:各瀏覽器的Hack寫法讓瀏覽器達到一致的渲染效果。感興趣的朋友請觀注本站的相關(guān)更新。

相關(guān)文章

  • 面向XHTML的IE條件注釋

    條件注釋是IE特有的一種功能，能對IE系列產(chǎn)品進行單獨的XHTML代碼處理，注意，主要是針對XHTML,而非CSS。 條件注釋功能非常強大，可以進行true和false判斷，例如：
    2008-10-17

  • IE的有條件注釋優(yōu)點和缺點

    IE的有條件注釋是一種專有的（因此是非標準的）、對常規(guī)（X）HTML注釋的Miscrosoft擴展。 IE的有條件注釋是一種專有的（因此是非標準的）、對常規(guī)（X）HTM
    2009-04-02

  • css 條件注釋區(qū)分非IE瀏覽器

    IE瀏覽器的條件注釋雖不太常用，卻異常強大，不僅可以用來區(qū)分IE瀏覽器版本
    2010-03-05

  • 針對主流瀏覽器的CSS-HACK寫法及IE常用條件注釋

    本文將為你總結(jié)CSS針對各瀏覽器的兼容HACK(以IE6/IE7/IE8 /FF為主),以及IE特有的條件注釋使用方法.
    2010-07-04

  • ie10 css hack 條件注釋等兼容方式整理

    ie10已經(jīng)上線一段時間了，相信已經(jīng)有一部分前端潮人體驗過了,截至到現(xiàn)在，在ie6到ie9的瀏覽器各種各樣的古怪行為，開發(fā)人員不得不使用條件注釋，有條件的類，和其他特定于I
    2012-12-11

  • 條件注釋判斷瀏覽器(ie系列)

    使用條件注釋判斷瀏覽器在某些時候還是比較使用的，比如css 樣式的兼容根據(jù)瀏覽器不同進行判斷加載，類似的例子還有好多，感興趣的朋友可以參考下，希望對大家有所幫助
    2013-07-26

  • 使用條件注釋判斷 IE 瀏覽器版本適用于IE5.0及以上版本

    IE條件注釋是一種特殊的HTML注釋，這種注釋只有IE5.0及以上版本才能理解，下面為大家介紹下使用條件注釋判斷 IE 瀏覽器版本，感興趣的朋友可以參考下
    2014-03-31

  • 詳談IE條件注釋

    條件注釋是IE特有的一種功能，能對IE系列產(chǎn)品進行單獨的XHTML代碼處理，注意，主要是針對XHTML,而非CSS。本文我們就來探討下關(guān)于IE條件注釋的相關(guān)問題。
    2014-12-08

最新評論