CSS Hack 學習與總結

最近工作寫CSS比較多，寫完之後發現問題很多，尤其是瀏覽器安全色問題，現將學到的和一些總結的寫下來。

1、什麼是CSS

Cascading Style Sheets(層疊樣式表)的簡稱.

一種標記語言,它不需要編譯,可以直接由瀏覽器解釋執行(屬於瀏覽器解釋型語言).

在標準網頁設計中負責網頁內容的表現.

例如 background-color: red; 被描述的元素的背景顏色為紅色。

2、CSS Hack 是什麼

      由於不同的瀏覽器比如IE6,IE7,Firefox等，對CSS的解析認識不一樣，因此會導致產生的頁面效果不一樣，得不到我們所需要的頁面效果。這個時候我們就需要針對不同的瀏覽器去寫不同的CSS，讓它能夠同時相容不同的瀏覽器，能在不同的瀏覽器中也能得到我們想要的頁面效果。

      這個針對不同的瀏覽器寫不同的CSS code的過程，就叫CSS hack!

3、CSS Hack 分類

   1、CSS類內部Hack

        * _ !important等

   2、選取器Hack

        * html和 *+html等

    3、HTML頭部引用Hack(if IE)

        <!--[if IE 8]>引入CSS<![endif]—>

4、CSS Hack 都有哪些

以下列出一些css hack用到的符號，並不是所有，只是當前用這些就足夠了。

CSS Hack	IE6	IE7	IE8	Firefox/chrome等
*	√	√	X	X
!important	X	√	√	√
-	√	X	X	X
_	√	X	X	X
+	√	√	X	X
\9	√	√	√	X
\0	X	X	√	X

*注意寫法(多數情況下是將hack寫在正常CSS屬性的下面)

5、區分IE與其他瀏覽器

 

.class {
    color:#F00;
    color:#FFFFFF\9;
}

在IE下文字顏色為白色。
在Firefox及chrome下文字顏色為紅色。

6、區分IE6與其他瀏覽器

.class {
    background-color:#F00;
    _background-color :#FFFFFF;
}
只有IE6能夠識別 _

在IE6下背景顏色為白色。
在其他瀏覽器下背景顏色為紅色。

7、支援IE6 & IE7的寫法

.class {
    background-color:#F00;
    +background-color :#FFFFFF;
}

在IE6、IE7下背景顏色為白色。
在其他瀏覽器下背景顏色為紅色

8、選取器Hack的使用

    #test
    {
       width: 300px;
        height: 300px;
        border: 3px solid #0f0;
    }
    
    *html #test
    {
        background-color: #eee;   //IE6下可識別
    }
    
    *+html #test
    {
        background-color: #000; //IE7下可識別
    }

9、HTML頭部引用Hack(if IE)

工作中用到的
<!--[if lt IE 8]>
  <link rel="stylesheet" href="/stylesheets/blueprint/ie.css" type="text/css" media="screen, projection">
  <link rel="stylesheet" href="/stylesheets/app/ie-hack.css" type="text/css" media="screen, projection">
<![endif]--><!--[if  IE 6]>  
<link rel="stylesheet" href="/stylesheets/app/ie6.css" type="text/css" media="screen, projection">
<![endif]-->

<!--[if  IE]>  、<!--[if  !IE]>   、<!--[if  !IE]>

10、在所有瀏覽器實現inline-block

在做導航條的時候，一般會用到ul li結構，大多數時候我是把li設定為浮動(float=left)，讓其並排顯示在同一行，最後再清除浮動(clear:both)防止影響後面的元素。另外一種方法 display:inline-block, ie6和ie7並不完全支援inline-blockli{display:inline-block;} IE6/7下無效li{display:inline-block; *display:inline;zoom:1;} 開啟haslaout

內部PPT檔案