CSS hack大全之特殊符號的應用

因爲各大瀏覽器尤爲IE瀏覽器對web標準支持狀況不一，致使標準的網頁在各個瀏覽器中的表現不一，所以，解決各瀏覽器兼容性問題成爲了前端工程師最重要的工做之一，而所謂的hack技術則是前端開發中必用的。

CSS hack的寫法有不少種，其中，特殊符號的應用最爲廣泛，也最爲簡潔，下面一一介紹了特殊符號類型的CSS hack技術：

一、反斜線（\）

適用瀏覽器：IE/Mac

反斜線（\）hack利用了IE/Mac的一個bug。以\*/結束的註釋在IE/Mac上是不正確關閉的，因此那些須要在IE/Mac上被忽略的語句能夠放在這種註釋後面。

/* 在IE Mac上忽略下面的語句 \*/

selector { ...styles... }

/* 忽略結束 */

二、下劃線（_）

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

IE 6 及如下的版本能夠識別帶有下劃線前綴的屬性，而其它瀏覽器會忽略它。所以，一個屬性前面加上下劃線或者連字符，就成爲了IE6及如下版本瀏覽器的專有屬性。

#elem {

width: [W3C Model Width];

_width: [BorderBox Model];

}

PS:這個hack利用瀏覽器的bug使用了無效的CSS，於是不推薦使用。

三、星號（*）

適用瀏覽器：IE7如下版本

除了下劃線和連字符，版本7及如下的IE能夠識別以非字母字符爲前綴的屬性，而其它瀏覽器會忽略。

#elem {

width: [W3C Model Width];

*width: [BorderBox Model];

}

PS:這個hack利用瀏覽器的bug使用了無效的CSS，於是不推薦使用。

四、星號 HTML（* html）

適用瀏覽器：IE4-6

HTML元素是W3C標準DOM的根元素，可是IE 4至6的版本中還有一個神祕的父元素。徹底兼容的瀏覽器會忽略這個* html選擇器，但IE4-6卻會對它正常處理。

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

PS：這個HACK使用了徹底有效的CSS。

五、星號加號（*+）

適用瀏覽器：IE7

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

或者：

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

PS：只在IE7標準模型裏工做正常，在怪異模式下不能用。同時，也被IE8的兼容模式（至關於IE7的標準模式）所支持。它也使用了有效的CSS。

六、子選擇器（>）

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

IE6和早期的版本不支持「子選擇器」(>)，咱們能夠利用這個爲其它瀏覽器指定特別的規則。

html > body p { color: blue; }

七、子選擇器加註釋（>/**/）

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

雖然IE7支持對子選擇器，但經過如下hack方法也能夠把IE7也排除。當一個空的註釋緊跟在子選擇器的後面重複的時候，IE7會不識別後面的規則，就和較早版本的瀏覽器同樣。

html >/**/ body p { color: blue; }

個人我的博客：http://www.wuyuelan.com