常見css hack有哪些 - tw511教學網

常見css hack有三種：1、條件hack，語法「」；2、屬性字首hack，語法「selector{<hack>?屬性名:屬性值<hack>?;}」；3、選擇器字首hack，語法「<hack> selector{ 樣式程式碼 }」。

本教學操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。

CSS hack 是通過在 CSS 樣式中加入一些特殊的符號，讓不同的瀏覽器識別不同的符號 (什麼樣的瀏覽器識別什麼樣的符號是有標準的，CSS hack 就是讓你記住這個標準)，,以達到應用不同的 CSS 樣式的目的。

CSS hack 是因為現有瀏覽器對標準的解析不同，為了相容各瀏覽器，所採用的一種補救方法.。為了相容低版本瀏覽器器的 CSS 解析 BUG，不得不把程式碼寫的很繞，直接增加了維護成本。

CSS hack 是一種類似作弊的手段，以欺騙瀏覽器的方式達到相容的目的，是用瀏覽器的相容性差異來解決瀏覽器的相容性問題。

常用的css hack有三種：條件hack、屬性hack、選擇符hack

1、條件hack

語法：

<!--[if <keywords>? IE <version>?]>
HTML程式碼塊
<![endif]-->

取值：

<keywords>

if條件共包含6種選擇方式：是否、大於、大於或等於、小於、小於或等於、非指定版本

是否：指定是否IE或IE某個版本。關鍵字：空
大於：選擇大於指定版本的IE版本。關鍵字：gt（greater than）
大於或等於：選擇大於或等於指定版本的IE版本。關鍵字：gte（greater than or equal）
小於：選擇小於指定版本的IE版本。關鍵字：lt（less than）
小於或等於：選擇小於或等於指定版本的IE版本。關鍵字：lte（less than or equal）
非指定版本：選擇除指定版本外的所有IE版本。關鍵字：!

如不想在非IE中看到某區域，可這樣寫：

<!--[if IE]>
<p>你在非IE中將看不到我的身影</p>
<![endif]-->

if條件6種選擇方式的使用範例

是否，範例程式碼：

<!--[if IE]>
<style>
.test{color:red;}
</style>
<![endif]-->

大於，範例程式碼：

<!--[if gt IE 6]>
<style>
.test{color:red;}
</style>
<![endif]-->

大於或等於，範例程式碼：

<!--[if gte IE 6]>
<style>
.test{color:red;}
</style>
<![endif]-->

小於，範例程式碼：

<!--[if lt IE 7]>
<style>
.test{color:red;}
</style>
<![endif]-->

小於或等於，範例程式碼：

<!--[if lte IE 7]>
<style>
.test{color:red;}
</style>
<![endif]-->

非指定版本，範例程式碼：

<!--[if ! IE 7]>
<style>
.test{color:red;}
</style>
<![endif]-->

2、屬性字首hack

語法：selector{<hack>?property:value<hack>?;}

取值：

_：選擇IE6及以下。連線線（中劃線）（-）亦可使用，為了避免與某些帶中劃線的屬性混淆，所以使用下劃線（_）更為合適。
*：選擇IE7及以下。諸如：（+）與（#）之類的均可使用，不過業界對（*）的認知度更高
\9：選擇IE6+
\0：選擇IE8+和Opera

[;property:value;];：選擇webkit核心瀏覽器（Chrome,Safari）。IE7及以下也能識別。中括號內外的3個分號必須保留，第一個分號前可以是任意規則或任意多個規則[;color:#f00;]; 與 [color:#f00;color:#f00;]; 與 [margin:0;padding:0;color:#f00;]; 是等價的。生效的始終是中括號內的最後一條規則，所以通常選用第一種寫法最為簡潔。

說明：

選擇不同的瀏覽器及版本

儘可能減少對CSS Hack的使用。Hack有風險，使用需謹慎
通常如未作特別說明，本檔案所有的程式碼和範例的預設執行環境都為標準模式。
一些CSS Hack由於瀏覽器存在交叉認識，所以需要通過層層覆蓋的方式來實現對不同瀏覽器進行Hack的。如下面這個例子：

.test{
    color:#090\9; /* For IE8+ */
    *color:#f00;  /* For IE7 and earlier */
    _color:#ff0;  /* For IE6 and earlier */
}

3、選擇器字首hack

語法：<hack> selector{ 樣式程式碼 }

說明：

選擇不同的瀏覽器及版本

儘可能減少對CSS Hack的使用。Hack有風險，使用需謹慎
通常如未作特別說明，本檔案所有的程式碼和範例的預設執行環境都為標準模式。
一些CSS Hack由於瀏覽器存在交叉認識，所以需要通過層層覆蓋的方式來實現對不同瀏覽器進行Hack的。

* html .test{color:#090;}       /* For IE6 and earlier */
* + html .test{color:#ff0;}     /* For IE7 */
.test:lang(zh-cn){color:#f00;}  /* For IE8+ and not IE */
.test:nth-child(1){color:#0ff;} /* For IE9+ and not IE */

（學習視訊分享：）

以上就是常見css hack有哪些的詳細內容，更多請關注TW511.COM其它相關文章！