DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> WEB網站前端 >> WEB前端代碼 >> html如何編寫浏覽器的條件樣式
html如何編寫浏覽器的條件樣式
編輯:WEB前端代碼     
作為前端工程師的我們來說,IE對我們來說一定是不陌生的。在編寫代碼實現設計稿的時候,往往會出現各式各樣有關IE的兼容性問題。對於兼容性的處理,方法也有很多。最簡單的方法就是針對浏覽器寫不同的樣式。
  IE中每個浏覽器都有一套屬於自己的注釋。屬於自己浏覽器的注釋會專門在自己的浏覽器中識別,而且他的浏覽器並不識別。下面我們將為大家揭曉條件樣式的編寫方法。
  是HTML語言中的注釋。它是一種添加到代碼中的筆記,讓自己或你的團隊成員明白你寫的是什麼,寫到什麼時候等等信息,這種注釋並不會在浏覽器中顯示出來,但大家在查看頁面的源代碼時可以看到這一部分,如下面的一個簡單實例:

[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浏覽器

[html]
<!--[if IE]>
<link rel="stylesheet" href="IE.css" type="text/css"/>
<![endif]-->
  2、支持除IE外的所有浏覽器

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

  3、僅僅支持IE10

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

  4、僅僅支持IE9

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

  5、僅僅支持IE8

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

  6、僅僅支持IE7

[html]
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="IE7.css">
<![endif]-->
  7、僅僅支持IE6

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

  8、支持IE10以下版本(IE9以及IE9以下版本)

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

  或

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

  9、支持IE9以下版本(IE8以及IE8以下版本)
[html]
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="ie8Down.css">
<![endif]-->
  
  或

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

  10、支持IE8以下版本(IE7以及IE7以下版本)

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

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


  11、支持IE7以下版本(IE6以及IE6以下版本)

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

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

  12、高於IE9的版本(IE10以及IE10以上版本)

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

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

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

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

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

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

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

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

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

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

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

  15、用條件注釋引用JavaScript標簽

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

  上面就是展示了如何創建條件注釋樣式,大家可以根據自己的需求使用其中的一種或是多種,最後總結一下條件注釋主要針對的是IE浏覽器,所以我們也把他稱作IE條件注釋。如此一來,我們管理給IE兼容寫的單獨樣式,就帶來了極大的方便與好處。有了條件注釋我們就可以輕松寫出條件樣式,就能解決個浏覽器中的問題了。條件注釋就為大家介紹到這裡。
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved