利用IE FF的不同識別CSS來使用瀏覽器相容問題

2021-09-08 17:06:17 字數 3283 閱讀 9513

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

ie6ie7ff*

√√×!important×√

√所有瀏覽器 通用 height: 100px;

ie6 專用 _height: 100px;

ie7 專用 *+height: 100px;

ie6、ie7 共用 *height: 100px;

ie7、ff 共用 height: 100px

!important;

#example /* ff */

另外再補充乙個,下劃線"_",ie6支援下劃線,ie7和ff均不支援下劃線。於是大家還可以這樣來區分ie6,ie7,ff: background:orange;*background:green;_background:blue;

注:不管是什麼方法,書寫的順序都是ff的寫在前面,ie7的寫在中間,ie6的寫在最後面。

1.*+html與 *html 是ie特有的標籤, firefox 暫不支援.而*+html 又為 ie7特有標籤.

2.表達方式:+property:value

測試環境:ie5,ie6 ,ie7,ff1.5,ff2.0,opera 9,safari 2測試結果:ie5,ie6 ,ie7瀏覽器識別;ff2.0,opera 9,safari 2瀏覽器不識別。結論:我們可以用"+"來實現只有ie識別的css hack。比如我們要實現在ie中500px的寬度,而在其他瀏覽器480px的寬度,就可以通過"+" hack來完成,如下:#hack

3.用於內聯css

5.ie7的hack

>bodyhtml**+html 這三種寫法,其中前兩種都是不合法的 css 寫法,在標準相容瀏覽器中被被忽略,但是 ie7 卻不這麼認為。 對於 >body ,它會將缺失的選擇符用全域性選擇符 * 代替,也就是將其處理成了 *>body,而且不光對於 > 選擇符,+,~ 選擇符中這個現象也存在。對於 html* ,由於 html 和 * 之間沒有空格,所以也是一種 css 語法錯誤,但 ie7 不會忽略,而是錯誤地認為這裡有乙個空格。對於第三種 *+html,ie7 認為 html 前面的 dtd 宣告也是乙個元素,所以 html 會被選中,這三種方法中只有這一種方法是合法的 css 寫法,也就是說可以通過校驗器的驗證,因此也是作者推薦的 hack 用法。

6.ie6不能識別

html/* */ >body  #box  ie6

字型不會變成紅色

7.遮蔽ie瀏覽器(也就是ie下不顯示)

8.僅ie7與ie5.0可以識別

*+html  select 當面臨需要只針對ie7與ie5.0做樣式的時候就可以採用這個hack。

9.僅ie7可以識別

*+html  select 當面臨需要只針對ie7做樣式的時候就可以採用這個hack。 

10.ie6及ie6以下識別

* html  select 這個地方要特別注意很多部落格都寫成了是ie6的hack其實ie5.x同樣可以識別這個hack。其它瀏覽器不識別。html/**/ >body  select 這句與上一句的作用相同。 

11.僅ie6不識別,遮蔽ie6

select 這裡主要是通過css注釋分開乙個屬性與值,注釋在冒號前。

12.僅ie6與ie5不識別,遮蔽ie6與ie5

select/**/ 這裡與上面一句不同的是在選擇符與花括號之間多了乙個css注釋。不遮蔽ie5.5

13.僅ie5不識別,遮蔽ie5

select/*ie5不識別*/ 這一句是在上一句中去掉了屬性區的注釋。只有ie5不識別,ie5.5可以識別。

14.盒模型解決方法

select \""; voice-family:inherit; width:正確寬度;}盒模型的清除方法不是通過!important來處理的。這點要明確。

15.盒模型解決方法

select:after 在firefox中,當子級都為浮動時,那麼父級的高度就無法完全的包住整個子級,那麼這時用這個清除浮動的hack來對父級做一次定義,那麼就可以解決這個問題。

16.只有opera識別

@media all and (min-width: 0px) }針對opera瀏覽器做單獨的設定。

17.ie5.x的過濾器,只有ie5.x可見

@media tty } @import 'ie5win.css'; /*";}}/* */

18.ie5/mac的過濾器,一般用不著

@media all and (min-width: 0px) }針對opera瀏覽器做單獨的設定。

利用css動畫屬性rotate來實現映象翻轉

要實現映象翻轉,有兩種實現方法 方法一 利用css動畫屬性rotate旋轉來實現 具體 mirrorrotatelevel mirrorrotatevertical 此處,rotatey 180deg 這裡的 y 表示元素以y軸映象翻轉,也即水平翻轉 同理,rotatex 180deg 表示以x軸為...

利用棧和堆來定義物件的不同之處

我們在定義乙個類的物件的時候,通常有兩種方法 採用棧來定義物件 human unique 採用堆來定義物件 human unique new human 下面,我們通過乙個程式來說明這兩種方法的區別 view code 該程式輸出結果為 對該結果的分析 我們在程式的第16行和第24行分別採用了堆分配...

本田希望利用聯網汽車來識別和報告危險路況

本田公司宣布了一項實驗,利用其汽車收集有關危險路況的資料。通過使用gps和攝像頭,這家日本汽車製造商正在收集有關糟糕的車道標記或坑洞的實時道路資訊,然後可以將其傳送給市政當局,以便將來進行改進。該公司說,這個試點專案由本田研究所負責,是第乙個使用互聯車輛技術來獲取道路狀況準確資料的專案。一開始,本田...