css HACK

一、什麼是CSS hack?

CSS hack是經過在CSS樣式中加入一些特殊的符號，讓不一樣的瀏覽器識別不一樣的符號
（什麼樣的瀏覽器識別什麼樣的符號是有標準的，CSS hack就是讓你記住這個標準），以達到應用不一樣的CSS樣式的目的，

好比.kwstu{width:300px;_width:200px;}
通常瀏覽器會先給元素使用width:300px;的樣式，緊接着後面還有個_width:200px;
因爲下劃線_width只有IE6能夠識別，因此此樣式在IE6中實際設置對象的寬度爲200px，後面的把前面的給覆蓋了，
而其餘瀏覽器不識別_width不會執行_width:200px;這句樣式，因此在其餘瀏覽器中設置對象的寬度就是300px;

 

2.CSS hack解決問題

CSS hack用來解決有些css屬性在不一樣瀏覽器中顯示的效果不同的問題，

如margin屬性在ie6中顯示的距離會比其餘瀏覽器中顯示的距離寬2倍，也就是說margin-left:20px;在ie6中距左側對象的實際顯示距離是40px，而在非ie6中顯示的距左側對象的距離是設置的值20px;

因此要想設置一個對象距離左側對象的距離在全部瀏覽器中都顯示是20px的寬度的樣式應爲：.kwstu{margin-left:20px;_margin-left:20px;}。

 

三、瀏覽器識別字符標準對應表

 

 

從上圖能夠分析出如下幾種狀況：

1.大部分特殊字符IE瀏覽器支持，其餘主流瀏覽器firefox，chrome，opera，safari不支持 (opera可識別除外)。

2.\9    ：全部IE瀏覽器都支持

3._和-  ：僅IE6支持

4.*     ：IE六、E7支持

5.\0    ：IE八、IE9支持，opera部分支持

6.\9\0  ：IE8部分支持、IE9支持

7.\0\9  ：IE八、IE9支持

 

因此咱們能夠把順序寫成這樣：（這也是兼容各大主流遊覽器的彙總）

.element{

　　color:#000;             /*w3c標準*/

　　[;color:#f00;];         /*Webkit(chrome和safari)*/

　　color:#666\9;           /*IE8*/

　　*color:#999;            /*IE7*/

　　_color:#333;            /*IE6*/

}
　　:root .element{color:#0f0\9;}  /*IE9*/

　　@media all and (-webkit-min-device-pixel-ratio:10000), not all and (

　　-webkit-min-device-pixel-ratio:0) { 
　　　　.element{color:#336699;}
　　}  /*opera*/

　　@-moz-document url-prefix(){
　　　　.element{color:#f1f1f1;}
　　} /*Firefox*/

 

(1)清除浮動

在Firefox中，當子級都爲浮動時，那麼父級的高度就沒法徹底的包住整個子級，那麼這時用這個清除浮動的HACK來對父級作一次定義，那麼就能夠解決這個問題。

select:after {
　　content:」.」;
　　display:block;
　　height:0;
　　clear:both;
　　visibility:hidden;
}