由于各大瀏覽器尤其IE瀏覽器對(duì)web標(biāo)準(zhǔn)支持情況不一，導(dǎo)致標(biāo)準(zhǔn)的網(wǎng)頁(yè)在各個(gè)瀏覽器中的表現(xiàn)不一，因此，解決各瀏覽器兼容性問(wèn)題成為了前端工程師最重要的工作之一，而所謂的hack技術(shù)則是前端開(kāi)發(fā)中必用的。

CSS hack的寫(xiě)法有很多種，其中，特殊符號(hào)的應(yīng)用最為普遍，也最為簡(jiǎn)潔，下面一一介紹了特殊符號(hào)類型的CSS hack技術(shù)：

1、反斜線（\）

適用瀏覽器：IE/Mac

反斜線（\）hack利用了IE/Mac的一個(gè)bug。以\*/結(jié)束的注釋在IE/Mac上是不正確關(guān)閉的，所以那些需要在IE/Mac上被忽略的語(yǔ)句可以放在這種注釋后面。

selector { ...styles... }

2、下劃線（_）

適用瀏覽器：IE6及其以下版本

IE 6 及以下的版本可以識(shí)別帶有下劃線前綴的屬性，而其它瀏覽器會(huì)忽略它。因此，一個(gè)屬性前面加上下劃線或者連字符，就成為了IE6及以下版本瀏覽器的專有屬性。

#elem {

width: [W3C Model Width];

_width: [BorderBox Model];

}

PS:這個(gè)hack利用瀏覽器的bug使用了無(wú)效的CSS，因而不推薦使用。

3、星號(hào)（*）

適用瀏覽器：IE7以下版本

除了下劃線和連字符，版本7及以下的IE可以識(shí)別以非字母字符為前綴的屬性，而其它瀏覽器會(huì)忽略。

#elem {

width: [W3C Model Width];

*width: [BorderBox Model];

}

PS:這個(gè)hack利用瀏覽器的bug使用了無(wú)效的CSS，因而不推薦使用。

4、星號(hào) HTML（* html）

適用瀏覽器：IE4-6

HTML元素是W3C標(biāo)準(zhǔn)DOM的根元素，但是IE 4至6的版本中還有一個(gè)神秘的父元素。完全兼容的瀏覽器會(huì)忽略這個(gè)* html選擇器，但I(xiàn)E4-6卻會(huì)對(duì)它正常處理。

* html p {font-size: 5em; }

PS：這個(gè)HACK使用了完全有效的CSS。

5、星號(hào)加號(hào)（*+）

適用瀏覽器：IE7

*:first-child+html p { font-size: 5em; }

或者：

*+html p { font-size: 5em; }

PS：只在IE7標(biāo)準(zhǔn)模型里工作正常，在怪異模式下不能用。同時(shí)，也被IE8的兼容模式（相當(dāng)于IE7的標(biāo)準(zhǔn)模式）所支持。它也使用了有效的CSS。

6、子選擇器（>）

適用瀏覽器： IE6以上版本及非IE瀏覽器

IE6和早期的版本不支持“子選擇器”(>)，我們可以利用這個(gè)為其它瀏覽器指定特別的規(guī)則。

html > body p { color: blue; }

7、子選擇器加注釋（>）

適用瀏覽器： IE7以上版本及非IE瀏覽器

雖然IE7支持對(duì)子選擇器，但通過(guò)以下hack方法也可以把IE7也排除。當(dāng)一個(gè)空的注釋緊跟在子選擇器的后面重復(fù)的時(shí)候，IE7會(huì)不識(shí)別后面的規(guī)則，就和較早版本的瀏覽器一樣。

html > body p { color: blue; }

最新評(píng)論