前端開發必須知道的CSS(一) CSS Hack

　　在開發中，我們常會遇到某些css在IE中顯示正常，但是在Firefox中顯示不是我們所希望的，或者在Firefox中正常而在IE中不是我們所要。由於不同瀏覽器對CSS的支援和解析不一樣，或者CSS優先順序不一樣，所以我們常針對不同的瀏覽器去寫不同的CSS，讓它能夠同時相容不同的瀏覽器，這就是CSS Hack。也可以說CSS Hack就是那些能區別不同瀏覽器的字元，如!important, * , _ 等。在看了一些網上的相關知識後和實踐後，作下總結。

各瀏覽器的CSS Hack：

在IE7發布之前，區分IE與FireFox（OP等與FireFox一樣），可以靠!important。譬如body{background-color:green !important;background-color:blue;} ，在IE6中開啟頁面，body的背景色是藍色，因為IE6不識別!important，而Firefox識別了!important，所以在Firefox中背景色是綠色，含有!important的樣式要寫在前面，因為如果2個樣式都能識別，後面的會覆蓋前面的。

而杯具的IE7識別了!important，所以不能僅靠!important來區分Firefox了。

另外，對*號的解釋，網上有些是這樣說的：*: Html 元素被認為是網頁上的第一個元素，即根項目。但是，IE 的所有目前的版本有一個匿名的根項目，它包圍著Html 元素,即*。

IE6 IE7都能識別*，但FF不能識別。IE6支援底線，IE7和firefox均不支援底線。而*+只有IE7才支援。

區別FF與IE6： 
        background-color:green !important;*background-color:blue;

區別IE7與IE6： 
        background-color:green !important;background-color:blue;

區別IE7與FF： 
        background-color:orange; *background-color:blue;

區別FF，IE7，IE6： 
        background-color:orange;*background-color:green !important;*background-color:blue;

　或者background-color:orange;*background-color:green;_background-color:blue;

然後，IE8又出來了，而唯一被IE8識別的是\0。

於是：

.test{
color:#000000;                  /* FF,OP支援 */
*color:#FFFF00;                 /* IE7支援 */
_color:#FF0000;               /* IE6支援 */

color:#0000FF\0;       　　　/* IE8*/
}

書寫順序：

由於FF/OP不能識別_   \0 和 *，IE7不能識別_ 和 \0 ，IE6不能識別\0 ，故順序應為：

FF-IE7-IE6-IE8

應用：

IE與Firefox等瀏覽器對容器width的解釋不同，在firefox，opera等中的寬度只包含容器中內容的寬度。而Internet Explorer的width則是指整個容器的寬度，包括內容，padding ，border-width。

 div.box{

　border-width:50px;

   padding:50px;

　width:200px; 
   height:200px; 
   *width:400px;     /*加*號被所有IE識別*/
   *height:400px;
   }

這樣就使得在IE和FF中內容的寬度高度都是200px。

 

針對此列，還有另外種解決辦法：

只要在DIV外面再添加一個無width定義的wrapper層，在wrapper中定義padding和border-width，然後在本DIV中定義width
如：
#wrapper { padding: 50px; border-width: 50px; }
#content { margin: 0px; width: 200px; }
<div id="wrapper">
　　<div id="content">
　　　　...
　　</div>
</div>

這樣內容就肯定是200px了，外面的padding和 border-width也正常顯示，主要就是將在不同瀏覽器會影響width的padding和 border-width抽離到內容層外面的層，從而不再影響width。