App下載
話題 首頁(yè) > CSS3 教程 > CSS3 教程話題列表 > 詳情

CSS Hack是什么意思?css hack有什么用?

精華
Shirley 2016-11-17 09:54:15 瀏覽(15340) 回復(fù)(5) 贊(1)
為什么有人說(shuō)要少用CSS Hack?
css css3

回答(5)

6600liang 精華 2016-11-17

一、什么是CSS Hack?


CSS hack谷歌翻譯給出的解釋是“CSS黑客”。

CSS Hack谷歌翻譯

百度翻譯給出的解釋是“瀏覽器兼容;瀏覽器兼容性問(wèn)題”

CSS Hack百度翻譯

那么在HTML中CSS hack究竟是什么意思呢?

CSS hack是通過(guò)在CSS樣式中加入一些特殊的符號(hào),讓不同的瀏覽器識(shí)別不同的符號(hào)(什么樣的瀏覽器識(shí)別什么樣的符號(hào)是有標(biāo)準(zhǔn)的,CSS hack就是讓你記住這個(gè)標(biāo)準(zhǔn)),以達(dá)到應(yīng)用不同的CSS樣式的目的,比如.kwstu{width:300px;_width:200px;},一般瀏覽器會(huì)先給元素使用width:300px;的樣式,緊接著后面還有個(gè)_width:200px;由于下劃線_width只有IE6可以識(shí)別,所以此樣式在IE6中實(shí)際設(shè)置對(duì)象的寬度為200px,后面的把前面的給覆蓋了,而其他瀏覽器不識(shí)別_width不會(huì)執(zhí)行_width:200px;這句樣式,所以在其他瀏覽器中設(shè)置對(duì)象的寬度就是300px;

以下是引自百度百科的定義

CSS hack由于不同廠商的瀏覽器,比如Internet Explorer,Safari,Mozilla Firefox,Chrome等,或者是同一廠商的瀏覽器的不同版本,如IE6和IE7,對(duì)CSS的解析認(rèn)識(shí)不完全一樣,因此會(huì)導(dǎo)致生成的頁(yè)面效果不一樣,得不到我們所需要的頁(yè)面效果。 這個(gè)時(shí)候我們就需要針對(duì)不同的瀏覽器去寫(xiě)不同的CSS,讓它能夠同時(shí)兼容不同的瀏覽器,能在不同的瀏覽器中也能得到我們想要的頁(yè)面效果。
簡(jiǎn)單的說(shuō),CSS hack的目的就是使你的CSS代碼兼容不同的瀏覽器。當(dāng)然,我們也可以反過(guò)來(lái)利用CSS hack為不同版本的瀏覽器定制編寫(xiě)不同的CSS效果。


注意: 我們通常主要考慮的瀏覽器有IE6、IE7、IE8、谷歌瀏覽器(chrome)、火狐(Mozilla Firefox)即可,至于我們常用的傲游、QQ的TT瀏覽器是用你計(jì)算機(jī)中裝的系統(tǒng)自帶瀏覽器的內(nèi)核,所以只需要兼容以上瀏覽器即可兼容TT傲游瀏覽器。

CSS Hack常見(jiàn)的有三種形式:

CSS屬性Hack、CSS選擇符Hack以及IE條件注釋Hack, Hack主要針對(duì)IE瀏覽器。

1、屬性級(jí)Hack:比如IE6能識(shí)別下劃線“_”和星號(hào)“*”,IE7能識(shí)別星號(hào)“*”,但不能識(shí)別下劃線”_ ”,而firefox兩個(gè)都不能認(rèn)識(shí)。

2、選擇符級(jí)Hack:比如IE6能識(shí)別*html .class{},IE7能識(shí)別*+html .class{}或者*:first-child+html .class{}。


CSS<wbr>Hack技術(shù)介紹及常用的Hack技巧集錦

3、IE條件注釋Hack:IE條件注釋是微軟IE5開(kāi)始就提供的一種非標(biāo)準(zhǔn)邏輯語(yǔ)句。比如針對(duì)所有IE:<!-[if IE]><!-您的代碼-><![endif]>,針對(duì)IE6及以下版本:<!-[if it IE 7]><!-您的代碼-><![endif]->,這類Hack不僅對(duì)CSS生效,對(duì)寫(xiě)在判斷語(yǔ)句里面的所有代碼都會(huì)生效。

PS:條件注釋只有在IE瀏覽器下才能執(zhí)行,這個(gè)代碼在非IE瀏覽下被當(dāng)做注釋視而不見(jiàn)??梢酝ㄟ^(guò)IE條件注釋載入不同的CSS、JS、HTML服務(wù)器代碼等。

二、CSS hack的實(shí)際應(yīng)用


CSS hack用來(lái)解決有些css屬性在不同瀏覽器中顯示的效果不一樣的問(wèn)題,如margin屬性在ie6中顯示的距離會(huì)比其他瀏覽器中顯示的距離寬2倍,也就是說(shuō)margin-left:20px;在ie6中距左側(cè)對(duì)象的實(shí)際顯示距離是40px,而在非ie6中顯示的距左側(cè)對(duì)象的距離是設(shè)置的值20px;所以要想設(shè)置一個(gè)對(duì)象距離左側(cè)對(duì)象的距離在所有瀏覽器中都顯示是20px的寬度的樣式應(yīng)為:.kwstu{margin-left:20px;_margin-left:20px;}。比如要分辨IE6和firefox兩種瀏覽器,可以這樣寫(xiě):

div{
background:green;/*forfirefox*/
*background:red;/*forIE6*/(bothIE6&&IE7)
}

我在IE6中看到是紅色的,在firefox中看到是綠色的。

解釋一下:上面的css在firefox中,它是認(rèn)識(shí)不了后面的那個(gè)帶星號(hào)的東西是什么的,于是將它過(guò)濾掉,不予理睬,解析得到的結(jié)果是:div{background:green} ,于是理所當(dāng)然這個(gè)div的背景是綠色的。在IE6中呢,它兩個(gè)background都能識(shí)別出來(lái),它解析得到的結(jié)果是:div{background:green;*background:red;} ,于是根據(jù)優(yōu)先級(jí)別,處在后面的red的優(yōu)先級(jí)高,于是當(dāng)然這個(gè)div的背景顏色就是紅色的了。CSS hack:區(qū)分IE6,IE7,firefox區(qū)別不同瀏覽器,CSS hack寫(xiě)法:

區(qū)別IE6與FF:

background:orange;*background:blue;

區(qū)別IE6與IE7:

background:green!important;background:blue;

區(qū)別IE7與FF:

background:orange;*background:green;

區(qū)別FF,IE7,IE6:

background:orange;*background:green;_background:blue;
background:orange;*background:green!important;*background:blue;

注:IE都能識(shí)別*;標(biāo)準(zhǔn)瀏覽器(如FF)不能識(shí)別*;IE6能識(shí)別*;不能識(shí)別 !important ;IE7能識(shí)別*,能識(shí)別!important;FF不能識(shí)別*,但能識(shí)別!important;

瀏覽器優(yōu)先級(jí)別:

FF<IE7<IE6,CSS hack

書(shū)寫(xiě)順序一般為FF IE7 IE6

以: " #demo {width:100px;} "為例:

#demo {width:100px;} /*被FIREFOX,IE6,IE7執(zhí)行.*/
* html #demo {width:120px;} /*會(huì)被IE6執(zhí)行,之前的定義會(huì)被后來(lái)的覆蓋,所以#demo的寬度在IE6就為120px; */
*+html #demo {width:130px;} /*會(huì)被IE7執(zhí)行*/
所以最后,#demo的寬度在三個(gè)瀏覽器的解釋為: FIREFOX:100px; ie6:120px; ie7:130px;
IE8 最新css hack:
"9" 例:"border:1px 9;".這里的"9"可以區(qū)別所有IE和FireFox.(只針對(duì)IE9 Hack)
"0" IE8識(shí)別,IE6、IE7不能.
"*" IE6、IE7可以識(shí)別.IE8、FireFox不能.
"_" IE6可以識(shí)別"_",IE7、IE8、FireFox不能.

IE6 hack

_background-color:#CDCDCD;/*ie6*/

IE7 hack

*background-color:#dddd00; /* ie 7*/IE8 hack
background-color:red 0; /* ie 8/9*/IE9 hack
background-color:blue 90;火狐,傲游,瀏覽器通用
background-color:red!important;

注意寫(xiě)hack的順序,其中:

background-color:red0;IE8和IE9都支持;
background-color:blue90; 僅IE9支持;
另外,background-color:eeeeee9;的HACK支持IE6-IE8,但是IE8不能識(shí)別“*”和“_”的CSS HACK。

可綜合上述規(guī)律靈活應(yīng)用。

IE9 和 IE8 以及其他版本的區(qū)別說(shuō)明

background-color:blue; 各個(gè)瀏覽器都認(rèn)識(shí),這里給firefox用;
background-color:red9;9所有的ie瀏覽器可識(shí)別;
background-color:yellow0; 0 是留給ie8的,最新版opera也認(rèn)識(shí),后面自有hack寫(xiě)了給opera認(rèn)的,所以,0我們就認(rèn)為是給ie8留的;
+background-color:pink; + ie7定了;
_background-color:orange; _專門(mén)留給神奇的ie6;
:root #test { background-color:purple9; } :root是給ie9的,網(wǎng)上流傳了個(gè)版本是 :root #test { background- color:purple0;},這個(gè),新版opera也認(rèn)識(shí),所以經(jīng)筆者反復(fù)驗(yàn)證最終ie9特有的為:root 選擇符 {屬性9;}
@media all and (min-width:0px){ #test {background-color:black0;} } 這個(gè)是老是跟ie搶著認(rèn)0的神奇的opera,必須加個(gè)0,不然firefox,chrome,safari也都認(rèn)識(shí)。。。
@media screen and (-webkit-min-device-pixel-ratio:0){ #test {background-color:gray;} }最后這個(gè)是瀏覽器新貴chrome和safari的。

選擇符級(jí)HackCSS內(nèi)部選擇符級(jí)Hack語(yǔ)法

<hack> selector{ sRules }

說(shuō)明選擇不同的瀏覽器及版本盡可能減少對(duì)CSS Hack的使用。Hack有風(fēng)險(xiǎn),使用需謹(jǐn)慎通常如未作特別說(shuō)明,本文檔所有的代碼和示例的默認(rèn)運(yùn)行環(huán)境都為標(biāo)準(zhǔn)模式。一些CSS Hack由于瀏覽器存在交叉認(rèn)識(shí),所以需要通過(guò)層層覆蓋的方式來(lái)實(shí)現(xiàn)對(duì)不同瀏覽器進(jìn)行Hack的。簡(jiǎn)單列舉幾個(gè):

* 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 */

內(nèi)部屬性HackCSS內(nèi)部屬性級(jí)Hack語(yǔ)法:

selector{<hack>?property:value<hack>?;}

取值:

注意: 不管是什么方法,書(shū)寫(xiě)的順序都是firefox的寫(xiě)在前面,IE7的寫(xiě)在中間,IE6的寫(xiě)在最后面。補(bǔ)充:IE6能識(shí)別* ,但不能識(shí)別 !important,IE7能識(shí)別 *,也能識(shí)別!important;FF不能識(shí)別 *,但能識(shí)別!important;下劃線” _ “,IE6支持下劃線,IE7和firefox均不支持下劃線。

三、為什么不推薦不推薦使用CSS hack來(lái)解決兼容性問(wèn)題


CSS hack是因?yàn)楝F(xiàn)有瀏覽器對(duì)標(biāo)準(zhǔn)的解析不同,為了兼容各瀏覽器,所采用的一種補(bǔ)救方法。CSS hack是一種類似作弊的手段,以欺騙瀏覽器的方式達(dá)到兼容的目的,是用瀏覽器的兼容性差異來(lái)解決瀏覽器的兼容性問(wèn)題。因此,在設(shè)計(jì)之初,寫(xiě)CSS hack需要遵循以下三條原則:

  • 有效: 能夠通過(guò) Web 標(biāo)準(zhǔn)的驗(yàn)證
  • 只針對(duì)太古老的/不再開(kāi)發(fā)的/已被拋棄的瀏覽器, 而不是目前的主流瀏覽器
  • 代碼要丑陋。讓人記住這是一個(gè)不得已而為之的 Hack, 時(shí)刻記住要想辦法去掉它?,F(xiàn)在很多hacks已經(jīng)拋棄了最初的原則,而濫用hack會(huì)導(dǎo)致瀏覽器更新之后產(chǎn)生更多的兼容性問(wèn)題。因此,并不推薦使用CSS hack來(lái)解決兼容性問(wèn)題。

常用的CSS Hack


代碼如下:

一筆荒蕪 2018-05-31

留名留名!!!,同樣的問(wèn)題,看看咋結(jié)局!!!

1144100656 2018-05-31

有同樣等問(wèn)題咋解決,只能慢慢等大神啦.留名留名。。

1152696398 2018-05-31

好慢呀,空空如也,半天不來(lái)大神解決,大佬在哪啦

要回復(fù),請(qǐng)先登錄 或者注冊(cè)