對CSS HACK的一些看法

那天瓜哥講了個問題，說說css hack的一些看法，說說自己的想法，不對多指教。

由於各種瀏覽器對css的解析存在差異，使同一頁面在各種瀏覽器下表現出來的效果也會不同。為了解決這個相容性問題，css hack技術產生了。

個人認為css hack技術其實是一種欺騙瀏覽器的技術，通過在選擇器、屬性等地方新增一些特別符號來使某些瀏覽器無法解析該選擇器或屬性，以達到區分不同的瀏覽器的目的。其實個人覺得css hack是不安全的，有風險的，現在的瀏覽器更新很快，版本也出現了好幾個，誰也無法100%保證為這個版本瀏覽器所設定的css hack在下乙個版本依然有效。比如在ie7還沒出來之前，!important一直作為區分ie和firefox的乙個css hack。但ie7出來以後，隨著ie7對!important的支援，區分ie和firefox也就不能只用!important來實現了，這就可能導致以前在ie6時期製作並使用了!important hack的網頁在ie7下可能會出現差異。

並不是說反對使用css hack技術，而是覺得對於乙個存在風險的技術應該盡量少用，能不用盡量不要用。以前看過一些朋友的css**，大量使用了hack技術，而且沒有注釋，可以想象要理解這些**是多麼的痛苦。隨著瀏覽器的更新，css hack 沒給我們帶來問題那是好事，但一旦出現問題，維護起來又需要一定的成本，倘若遇到如上面所提到的css**，那才真的頭疼。那麼何時才用css hack呢？我覺得當你確定是瀏覽器對css的解析不符合規範，或者說是瀏覽器本身的bug引起，而不是由於你自身對css的理解不夠或者頁面結構錯誤一些細節問題而引起的表現差異，這才是css hack的用武之地，而不是一旦發現表現差異就立刻使用css hack，這樣寫出來的css**往往是缺乏規範的，也缺乏可讀性，到時候維護的成本也很大。

屬性ie6

ie7

ie8

ff2ff3

opera9.5

>propertyyy

y n

n n

.propertyyy

yn n n

*propertyyy

ynn n

_propertyyn

n nn n

通過上表我們可以看到》、.、*在各瀏覽器中的表現是一致的，而_在ie6和ie7、ie8中有所區別。另外，ie6不支援!important的，而其他幾款瀏覽器都能夠識別。

我們可以看一下示例：

區別ie6與ff： background:orange;*background:blue;

區別ie6與ie7：background:green !important;background:blue;

區別ie7與ff： background:orange; *background:green;

區別ff/ie7/ie6：background:orange;*background:green !important;*background:blue;

注：ie都能識別*標準瀏覽器(如ff)不能識別*

ie6能識別*，但不能識別 !important

ie7能識別*，也能識別!important

ff不能識別*，但能識別!important

ie6支援下劃線，ie7和firefox均不支援下劃線。

於是大家還可以這樣來區分ie6、ie7、firefox : background:orange;*background:green;_background:blue;

通過css hack，可以實現在不同的瀏覽器上實現相同的樣式，有效解決瀏覽器間的差異。

對CSS HACK的一些看法

對 XML 的一些看法

對GDB的一些看法

對 XML 的一些看法

對CSS HACK的一些看法

對 XML 的一些看法

對GDB的一些看法

對 XML 的一些看法

相關推薦