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的寫在最後面。