Css hack總結及其最佳用法，告訴你怎麼運用hack，無懈可擊的解決各個瀏覽器的樣式相容

CSS HACK總結

　　　　在開發頁面的過程中，總會遇到這樣那樣的不相容問題，在盡量避免使用一些相容性很差的元素和樣式後，往往還有細節上的不相容問題，追求完美的前端工程師們就要採用css hack來解決問題了。

　　　　網上各種css hack資料很多，但是很多是有錯誤，或者不形象的，今天我來細緻形象的總結一下他們，及最萬無一失的用法~

 

　　  　所有效果均經過各個瀏覽器測試

　　　　

　　　　首先 ，將要提及的css hack 有：_,*,\0,\9,\0\9,!important

　　　　各個hack的作用：

　　　　　　_ ：用於IE6

　　　　　　　　代碼：　

1 background-color:blue;
2 _background-color:red;

　　　　　　　　效果：

 

 　　　　　 *和+：用於IE6,IE7

　　　　　　　代碼：

1 background-color:blue;
2 *background-color:red;　

　　　　

1 background-color:blue;
2 +background-color:red;

　　

　　　　　　效果都為：

　　　　

　　　　　　\0:用於IE8，IE9

　　　　　　　　代碼：

1 background-color:blue;
2 background-color:red\0;

 　　　　　　　效果：

　　　　　　　　沒錯，在IE6下 無法識別了~~~

　　　　　　\9:用於 IE6，IE7，IE8，IE9

　　　　　　　　代碼：

1 background-color:blue;
2 background-color:red\9;

　　　　　　　　效果：

　　　　　　\9\0:用於IE9

　　　　　　　　代碼：

1 background-color:blue;
2 background-color:red\9\0;

　　　　　　　　效果：　

　　　　　　　　

　　　　　　沒錯IE6，又無法識別了~~~~

 

 　　　　！important:用於所有瀏覽器--不能算做是hack了，不推薦使用哦

　　　　　　　　代碼：

1 div{
2     background-color:red !important;
3 }
4 #test{
5     background-color:blue;
6 }

　　　　　　　　效果：

　　　　　　　　加上！important 可以完全無視css優先順序了~~~

CSS HACK最佳應用方式

　　　　　　　  那麼該怎麼使用css hack ，達到最好的效果----不影響已經符合標準的瀏覽器樣式呢？

　　　　　　　　對於IE6：

　　　　　　　　　　代碼

1 background-color:blue;
2 _background-color:red;

　　　　　　　　如果IE7，IE6同時有問題：

　　　　　　　　　　以下2選一：

　　　　　　　　　　代碼：

1 background-color:blue;
2  *background-color:red;

 

1 background-color:blue;
2  +background-color:red;

　　　　　　　　如果只有IE7呢？

　　　　　　　　　　代碼：

1 background-color:blue;
2 *background-color:red;
3 _background-color:blue;

　　　　　　　　對於IE8：

　　　　　　　　　代碼：

1 background-color:blue;
2 background-color:red\9;
3 *background-color:blue;
4 background-color:blue\9\0;

　　　　　　  　對於IE9：

　　　　　　　　　代碼:　　記得恢複IE6~

1 background-color:blue;
2 background-color:red\9\0;
3 _ background-color:blue;

　　　　　　　對於整個IE：

1 background-color:blue;
2 background-color:red\9;