CSS對IE、FireFox和其它瀏覽器的控制


由於不同的瀏覽器,對 CSS 的解析認識不一樣,
因此會導致產生的頁面效果不一樣,得不到我們所需要的頁面效果。

這個時候我們就需要針對不同的瀏覽器去寫不同的CSS,
讓它能夠同時相容不同的瀏覽器,進而得到我們想要的頁面效果。

由於不同的瀏覽器對於 CSS 讀取優先順序的關係。
我們根據這個來針對不同的瀏覽器來寫不同的 CSS。

比如
IE6 能識別下劃線 _ 和星號 *
IE7 能識別星號 *,當不能識別下劃線 _
而 firefox 兩個都不能認識

撰寫順序,一般是將識別能力強的流覽器的CSS寫在後面。

下面如何寫裏面說得更詳細些。

比如要分辨 IE6 和 firefox 兩種瀏覽器,可以這樣寫:

<style>
div{
background:green; /* for firefox */
*background:red;  /* for IE6 */
}
</style>

這樣出來的效果是 IE6 中看到是紅色的,在 firefox 中看到是綠色的。
解釋一下:
因為 firefox 不認識那個帶星號 * 的是什麼,於是會自動將它過濾掉,理所當然這個 div 的背景是綠色的。
在 IE6 中呢,它兩個 background 都能識別出來,於是根據優先順序別,處在後面的 red 的優先順序高,當然這個 div  的背景顏色就是紅色的了。

區分IE6,IE7,firefox 區別不同瀏覽器,CSS hack 寫法:

區別 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;

註:不管是什麼方法,書寫的順序都是firefox的寫在前面,IE7的寫在中間,IE6的寫在最後面。

你可以延伸閱讀以下文章:

網友回應

Tags: ,