本篇內(nèi)容主要講解“CSS中Hack的基本原理和實(shí)現(xiàn)方式”，感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“CSS中Hack的基本原理和實(shí)現(xiàn)方式”吧!

創(chuàng)新互聯(lián)專業(yè)為企業(yè)提供合山網(wǎng)站建設(shè)、合山做網(wǎng)站、合山網(wǎng)站設(shè)計(jì)、合山網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)與制作、合山企業(yè)網(wǎng)站模板建站服務(wù)，10余年合山做網(wǎng)站經(jīng)驗(yàn)，不只是建網(wǎng)站，更提供有價(jià)值的思路和整體網(wǎng)絡(luò)服務(wù)。

CSS Hack的基本原理和實(shí)現(xiàn)方式

由于不同的瀏覽器，比如IE6、IE7、IE8、Firefox等，對(duì)CSS解析的標(biāo)準(zhǔn)不同，因此對(duì)于相同的CSS代碼，可能會(huì)生成不同的頁(yè)面效果，從而無(wú)法在所有瀏覽器中得到我們想要的效果。這時(shí)，我們就需要針對(duì)不同的瀏覽器去寫不同的CSS代碼，讓它能夠在所有瀏覽器中獲得相同的效果。這個(gè)過(guò)程，就是CSS hack。也就是寫出只有個(gè)別瀏覽器或某些瀏覽器識(shí)別的CSS代碼。

CSS Hack的基本原理

CSS hack是因?yàn)楝F(xiàn)有瀏覽器對(duì)標(biāo)準(zhǔn)的解析不同，為了兼容各瀏覽器，所采用的一種補(bǔ)救方法。

CSS hack是一種類似作弊的手段，以欺騙瀏覽器的方式達(dá)到兼容的目的，是用瀏覽器的兼容性差異來(lái)解決瀏覽器的兼容性問題。因此，在設(shè)計(jì)之初，寫CSS hack需要遵循以下三條原則：

◆有效：能夠通過(guò)Web標(biāo)準(zhǔn)的驗(yàn)證

◆只針對(duì)太古老的/不再開發(fā)的/已被拋棄的瀏覽器，而不是目前的主流瀏覽器

◆代碼要丑陋。讓人記住這是一個(gè)不得已而為之的Hack,時(shí)刻記住要想辦法去掉它。

現(xiàn)在很多hacks已經(jīng)拋棄了最初的原則，而濫用hack會(huì)導(dǎo)致瀏覽器更新之后產(chǎn)生更多的兼容性問題。因此，并不推薦使用CSS hack來(lái)解決兼容性問題。

CSS hack的實(shí)現(xiàn)方式

我總結(jié)了一下，實(shí)現(xiàn)CSS hack大概有以下幾種方式：

1.利用瀏覽器對(duì)相同代碼的解析和支持的不同實(shí)現(xiàn)的hack

不同瀏覽器對(duì)相同的CSS代碼的支持情況可能不同。尤其是對(duì)錯(cuò)誤的寫法。

例如

CSScode

#test{  _width:80px;  }

在IE7及以上版本的瀏覽器中會(huì)被當(dāng)作錯(cuò)誤特性而舍棄，但是在IE6中可以被正常的解析。這時(shí)候，可以把_width當(dāng)作hack，專門針對(duì)IE6來(lái)設(shè)置元素的寬度。

2.以Firefox或Webkit特有的擴(kuò)展樣式實(shí)現(xiàn)的hack

以-moz或-webkit開頭的擴(kuò)展樣式，是瀏覽器對(duì)CSS標(biāo)準(zhǔn)的擴(kuò)展。這些特性只在相應(yīng)的瀏覽器里才可以被正常的解析。因此可以被當(dāng)作CSS hack來(lái)使用。

◆以-moz開頭的Firefox特有擴(kuò)展樣式

Mozilla瀏覽器支持的一些擴(kuò)展是以-moz開頭的。這些擴(kuò)展包括了一些功能，例如圓形邊界等。這種CSS只適用于Mozilla瀏覽器。
比如，-moz-opacity是在Firefox2.0版本出現(xiàn)的特性，用來(lái)實(shí)現(xiàn)元素的透明，但Firefox3.0以后的版本中不再支持，而是直接支持標(biāo)準(zhǔn)中的opacity特性。而其他瀏覽器不支持-moz-opacity。所以，可以使用-moz-opacity來(lái)針對(duì)Firefox2.0設(shè)置元素的透明度。
關(guān)于Firefox擴(kuò)展樣式的詳細(xì)信息，見MozillaCSSExtensions。

◆以-webkit開頭的Webkit瀏覽器特有擴(kuò)展樣式

與以-moz開頭的Firefox特有擴(kuò)展樣式相同，以-webkit開頭的樣式是Webkit瀏覽器特有的，只有Webkit瀏覽器可以解析。
比如，在Webkit瀏覽器中可以用-webkit-border-radius實(shí)現(xiàn)圓角。

3.利用IE對(duì)標(biāo)準(zhǔn)的支持缺陷寫的CSS hack

這個(gè)類別以中的hack以IE對(duì)標(biāo)準(zhǔn)的支持缺陷為基礎(chǔ)，可以讓CSS代碼針對(duì)IE6或IE7以外的瀏覽器生效。
例如，!important只有IE7及以上版本的IE及其他瀏覽器支持，所以，可以用!important來(lái)針對(duì)IE6以外的瀏覽器寫CSS代碼；再如，head:first-child+bodyselector，:first-child不被IE6支持，所以可以用來(lái)針對(duì)IE6以外的瀏覽器編寫CSS代碼。
此處不在一一列舉。

當(dāng)然，有的觀點(diǎn)認(rèn)為應(yīng)用CSS2.1標(biāo)準(zhǔn)，不屬于CSS hack。見Tantek'sThoughts，UsingACSS2FeatureIsNOTaHack。

4.以IE特有的條件注釋為基礎(chǔ)的hack

IE瀏覽器中特有的條件注釋也經(jīng)常被用作hack，可以針對(duì)特定版本的IE寫CSS代碼。

例如，測(cè)試用例：

HTMLcode TEXT

以上代碼中的"TEXT"，只在IE8中才會(huì)是紅色。

到此，相信大家對(duì)“CSS中Hack的基本原理和實(shí)現(xiàn)方式”有了更深的了解，不妨來(lái)實(shí)際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！