CSS Hack和CSS Conditional Comments

最後更新：2018-12-07 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

文章目錄

1. _ * \9 !important
2.關於!important和*+html
1.基本使用方法
2.判斷IE瀏覽器的基本文法
3.邏輯判斷
4.使用

如果你的web網站或應用程式是供給不同的瀏覽器使用者使用的，那麼你可能就需要使用到CSS Hack和CSS Conditional Comments，本質上CSS Conditional Comments是CSS Hack的一種。如果你的web網站CSS不是特別複雜，用CSS Hack就能夠解決瀏覽器CSS相容性問題，但是如果你的網站對使用者體驗要求比較高或者設計非常絢麗，用CSS Conditional Comments(CSS 條件注釋)將是你更好的選擇。簡單的來說，CSS Hack是通過一些特殊的字元來區分IE6/7/8以及Firefox的，CSS Conditional Comments是給不同的瀏覽器載入不同的CSS檔案（當然，這也可以用js來做）。

一、CSS Hack

CSS Hack是通過一些特殊的字元來區別IE 6, IE 7, IE 8和Firefox的，瀏覽器對於不能識別的字元，將會直接過濾掉，有很多字元能夠用於CSS Hack，在這裡有一個非常詳細的列表，下面我只列出了一些比較常用的Hack字元。

	IE6	IE7	IE8	FireFox
_	√	×	×	×
*	√	√	×	×
*+ html	×	√	×	×
!important	×	√	√	√
\9	√	√	√	×
@import ‘style.css’ @import “style.css” @import url(style.css) @import url(‘style.css’) @import url(“style.css”)	√	√	√	√

1. _ * \9 !important

區別Firefox 和 IE 6

/*區別Firefox和IE 6*/body{background-color: red;/*Firefox*/*background-color: yellow;/*IE6/7*/}

區別Firefox 和 IE 7

/*區別Firefox 和 IE 7*/body{background: orange;*background: green;}
區別IE 7 和 IE 6
 
        /*區別IE 7 和 IE 6*//*ie7顯示綠色，ie6顯示藍色*/body{background: green !important;*background: blue;}
 
 
區別IE和Firefox
/*區別IE和Firefox*/body{background-color: red;/*所有瀏覽器都支援*/background-color: yellow\9;/*IE6/7/8*/}
區別FF/IE8/IE7/IE6
/*區別IE6/7/8和其他瀏覽器*/body{background-color: red;/*所有瀏覽器都支援Firefox顯示紅色*/background-color: green\9;/*IE6/7/8IE8顯示綠色*/*background-color: yellow;/*IE6/7IE7顯示黃色*/_background-color: blue;/*IE6IE6顯示藍色*/}
 
從上述代碼中，可以看出，書寫CSS Hack的順序為Firefox<IE8<IE7<IE6，由高標準向低標準走。
2.關於!important和*+html引用：http://www.neoease.com/css-browser-hack/
優先度: (*+html + !important) > !important > +html
#bgcolor {background:red !important; /* Firefox 等其他瀏覽器 */background:blue; /* IE6 */}*+html #bgcolor {background:green !important; /* IE7 */}
二、CSS Conditional Comments引用：http://lifesinger.org/blog/2009/06/goodbye-to-css-hack/
http://www.yaosansi.com/post/1000.html
條件注釋包含一些判斷，不過這些判斷並不是在js中執行，而是在html中執行，使用的方法也非常簡單。
1.基本使用方法<!--[if XXX]>這裡是正常的html代碼<![endif]-->
2.判斷IE瀏覽器的基本文法<!--[if IE]> / 如果瀏覽器是IE /<!--[if IE 6]> / 如果瀏覽器是IE 6 的版本 /<!--[if IE 7]> / 如果瀏覽器是IE 7 的版本 /<!--[if IE 8]> / 如果瀏覽器是IE 8 的版本 /
3.邏輯判斷邏輯判斷並不是很常用，但是其中的”!”常常用於判斷非IE瀏覽器
lte：就是Less than or equal to的簡寫，也就是小於或等於的意思。
  
lt ：就是Less than的簡寫，也就是小於的意思。
  
gte：就是Greater than or equal to的簡寫，也就是大於或等於的意思。
  
gt ：就是Greater than的簡寫，也就是大於的意思。
  
! ：就是不等於的意思，跟javascript裡的不等於判斷符相同
例句：
<!--[if gt IE 6]> / 如果IE版本大於6 /<!--[if lte IE 7]> / 如果IE版本小於等於7 /<!--[if !IE]> / 如果瀏覽器不是IE /
4.使用<!-- 預設先調用css.css樣式表 --><link rel="stylesheet" type="text/css" href="css.css" /><!--[if !IE]><!-- 非IE下調用1.css樣式表 --><link rel="stylesheet" type="text/css" href="1.css" /><![endif]--><!--[if lt IE 6]><!-- 如果IE瀏覽器版本小於6,調用2.css樣式表 --><link rel="stylesheet" type="text/css" href="2.css" /><![endif]-->
<!--[if lt IE 7 ]><body class="ie6"><![endif]--><!--[if IE 7 ]><body class="ie7"><![endif]--><!--[if IE 8 ]><body class="ie8"><![endif]-->><!--[if !IE]>--><body><!--<![endif]--><style type="text/css">    body.ie6 .test { background-color: blue }    body.ie7 .test { background-color: red }    body.ie8 .test { background-color: green }</style>

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More