本篇內(nèi)容介紹了“如何理解CSS Hack”的有關(guān)知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠?qū)W有所成！

創(chuàng)新互聯(lián)建站專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務，包含不限于做網(wǎng)站、成都做網(wǎng)站、潢川網(wǎng)絡推廣、成都小程序開發(fā)、潢川網(wǎng)絡營銷、潢川企業(yè)策劃、潢川品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運營等，從售前售中售后，我們都將竭誠為您服務，您的肯定，是我們最大的嘉獎；創(chuàng)新互聯(lián)建站為所有大學生創(chuàng)業(yè)者提供潢川建站搭建服務，24小時服務熱線：13518219792，官方網(wǎng)址：vcdvsql.cn

摘要：
      在我們制作頁面時CSS hack由于不同的瀏覽器，比如Internet Explorer,Mozilla Firefox等，對CSS的解析認識不一樣，因此會導致生成的頁面效果不一樣，得不到我們所需要的頁面效果。 這個時候我們就需要針對不同的瀏覽器去寫不同的CSS，讓它能夠同時兼容不同的瀏覽器，能在不同的瀏覽器中也能得到我們想要的頁面效果。

CSS Hack大致有3種表現(xiàn)形式，屬性級Hack、選擇器Hack以及IE條件Hack

注意：盡可能減少對CSS Hack的使用。

原理：
由于不同的瀏覽器對CSS的支持及解析結(jié)果不一樣，還由于CSS中的優(yōu)先級的關(guān)系。我們就可以根據(jù)這個來針對不同的瀏覽器來寫不同的CSS。

實際應用：
選擇器：

語法：
       <hack> selector{ sRules }

說明：
 選擇不同的瀏覽器及版本
通常如未作特別說明，所有的代碼和示例的默認運行環(huán)境都為標準模式。
一些CSS Hack由于瀏覽器存在交叉認識，所以需要通過層層覆蓋的方式來實現(xiàn)對不同瀏覽器進行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 */
:root .test {background-color:green;}                                      /* For IE9 and Opera */
@media screen and (-webkit-min-device-pixel-ratio:0) {.test {color:gray;}} /* For Chrome and Safari */
@-moz-document url-prdfix() {.test {color:#fff}}                           /* For Forefox */
* 上述代碼中的3,4兩行就是典型的利用能力來進行選擇的CSS Hack。

          
IE條件Hack:
語法：

代碼如下:

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

取值：
<keywords>

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

     是否：
指定是否IE或IE某個版本。關(guān)鍵字：空
     大于：
選擇大于指定版本的IE版本。關(guān)鍵字：gt（greater than）
     大于或等于：
選擇大于或等于指定版本的IE版本。關(guān)鍵字：gte（greater than or equal）
     小于：
選擇小于指定版本的IE版本。關(guān)鍵字：lt（less than）
     小于或等于：
選擇小于或等于指定版本的IE版本。關(guān)鍵字：lte（less than or equal）
     非指定版本：
選擇除指定版本外的所有IE版本。關(guān)鍵字：!
<version>
      目前的常用IE版本為6.0及以上

說明：
用于選擇IE瀏覽器及IE的不同版本
if條件Hack是HTML級別的（包含但不僅是CSS的Hack，可以選擇任何HTML代碼塊）
如不想在非IE中看到某區(qū)域，可這樣寫：

代碼如下:

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

上述p代碼塊，將只在IE中可見。

if條件6種選擇方式的使用示例（下述代碼中被條件注釋包含的HTML代碼塊也可以是link標記）：
是否，示例代碼：

代碼如下:

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

在上述代碼中，只有IE瀏覽，才能看到應用了test類的元素是紅色文本。

大于，示例代碼：

代碼如下:

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

在上述代碼中，只有IE6以上，才能看到應用了test類的元素是紅色文本。

大于或等于，示例代碼：

代碼如下:

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

在上述代碼中，只有IE6以上（含IE6），才能看到應用了test類的元素是紅色文本。

小于，示例代碼：

代碼如下:

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

在上述代碼中，只有IE7以下，才能看到應用了test類的元素是紅色文本。

小于或等于，示例代碼：

代碼如下:

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

在上述代碼中，只有IE7以下（含IE7），才能看到應用了test類的元素是紅色文本。

非指定版本，示例代碼：

代碼如下:

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

在上述代碼中，除IE7以外的IE版本，都能看到應用了test類的元素是紅色文本。

屬性級：
　　語法：
　　　　　　selector{<hack>property:value;}或者selector{property:value<hack>;}

取值：
　　　　　　_：選擇IE6及以下。連接線（中劃線）（-）亦可使用，為了避免與某些帶中劃線的屬性混淆，所以使用下劃線（_）更為合適。
　　　　　　*：選擇IE7及以下。諸如：（+）與（#）之類的均可使用，不過業(yè)界對（*）的認知度更高
　　　　　　\9：選擇IE6+，可以區(qū)別所有IE和FireFox。
　　　　　　\0：選擇IE8+和Opera
　　　　　　[;property:value;];：選擇webkit核心瀏覽器（Chrome,Safari）。IE7及以下也能識別。中括號內(nèi)外的3個分號必須保留，第一個分號前可以是任意規(guī)則或任意多個規(guī)則
　　　　　　　　　　　　　　[;color:#f00;]; 與 [color:#f00;color:#f00;]; 與 [margin:0;padding:0;color:#f00;]; 是等價的。生效的始終是中括號內(nèi)的最后一條規(guī)則，所以通常選用第一種寫法最為簡潔。
　　　注意：!important并不是一個hack手段，他是被用來改變css的優(yōu)先級的，因為ie6是不識別!important,所以就被拿來當做css hack的一種，這是錯誤的。
　　說明：
　　選擇不同的瀏覽器及版本
  瀏覽器優(yōu)先級別:FF<IE9<IE8<IE7<IE6,CSS hack書寫順序一般為FF IE9 IE8 IE7 IE6
一些CSS Hack由于瀏覽器存在交叉認識，所以需要通過層層覆蓋的方式來實現(xiàn)對不同瀏覽器進行Hack的。如下面這個例子：
如想同一段文字在IE6,7,8顯示為不同顏色，可這樣寫：

代碼如下:

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

* 上述Hack均需運行在標準模式下，若在怪異模式下運行，這些Hack將會被不同版本的IE相互識別，導致失效。

HACK Demo:

代碼如下:

.demo{color:#f1ee18;/*所有識別*/ background-color:#00deff\9; /*IE6、7、8識別*/ +background-color:#a200ff;/*IE6、7識別*/ _background-color:#1e0bd1/*IE6識別*/}
@media screen and (-webkit-min-device-pixel-ratio:0){.demo{background-color:#f1ee18}}{} /* Safari(Chrome) 有效 */
@media all and (min-width: 0px){ .demo{background-color:#f1ee18;/*opera and Safari(Chrome) and firefox*/ background-color:#4cac70\0;}/* 僅 Opera 有效 */ }{}
.demo, x:-moz-any-link, x:default{background-color:#4eff00;/*IE7、Firefox3.5及以下 識別 */}
@-moz-document url-prefix(){.demo{background-color:#4eff00;/*僅 Firefox 識別 */}}
* +html .demo{background-color:#a200ff;}/* 僅IE7 識別 */
/* 一般情況下 我們區(qū)分IE7 只用 +background-color 配合 _background-color 就行了 如果必須寫 .demo, x:-moz-any-link, x:default 這樣的代碼區(qū)分 Firefox3.5及以下 則謹記此寫法對IE7也有效，故在其中要再重寫一次 +background-color 或者使用 * +html .demo{background-color:blue;} 方法僅對 IE7 有效。可使用 @-moz-document url-prefix(){}方法獨立區(qū)分所有 firefox */
.demo, x:-moz-any-link, x:default{display:block;/*IE7 firefox3.5及以下 識別 */+display:none/*再區(qū)分一次IE7*/}
@-moz-document url-prefix(){.demo{display:block;/*僅 firefox 識別 */}}
@media screen and (-webkit-min-device-pixel-ratio:0){.demo{display:block;}}{} /* safari(Chrome) 有效 */
@media all and (min-width: 0px){.demo{display:none\0;} /* 僅 Opera 有效 */ }{}

“如何理解CSS Hack”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實用文章！

當前題目：如何理解CSSHack
文章起源：http://vcdvsql.cn/article30/pdsjpo.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供靜態(tài)網(wǎng)站、域名注冊、虛擬主機、建站公司、網(wǎng)站內(nèi)鏈、營銷型網(wǎng)站建設

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)