css在不同瀏覽器中的寫法

2021-05-22 10:03:26 字數 1600 閱讀 6838

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

我在ie6中看到是紅色的,在firefox中看到是綠色的。

解釋一下:

上面的css在firefox中,它是認識不了後面的那個帶星號的東東是什麼的,於是將它過濾掉,不予理睬,解析得到的結果是:div,於是理所當然這個div的背景是綠色的。

在ie6中呢,它兩個background都能識別出來,它解析得到的結果是:div,於是根據優先級別,處在後面的red的優先順序高,於是當然這個div的背景顏色就是紅色的了。

css hack:區分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;_background:blue;

background:orange;*background:green !important;*background:blue;

注:ie都能識別*;標準瀏覽器(如ff)不能識別*;

ie6能識別*,某些情況下不能識別 !important,

ie6支援重定義中的!important,例如:

.yuanxin

.yuanxin

你將會發現定義了樣式class="yuanxin"時,在ie下,字型顯示為紅色(#e00)。

但不支援同一定義中的!important。例如:

.yuanxin

此時在ie6下不支援,你將會發現定義了樣式class="yuanxin"時,字型顯示為黑色(#000)。

ie7能識別*,也能識別!important;

ff不能識別*,但能識別!important;

ie6 ie7 ff

!important × √ √

瀏覽器優先級別:ff以: " #demo "為例;

#demo /*被firefox,ie6,ie7執行.*/

* html #demo /*會被ie6執行,之前的定義會被後來的覆蓋,所以#demo的寬度在ie6就為120px; */

*+html #demo /*會被ie7執行*/

---------------

所以最後,#demo的寬度在三個瀏覽器的解釋為:

firefox:100px;

ie6:120px;

ie7:130px;

ie8 最新css hack:

"/9" 例:"border:1px /9;".這裡的"/9"可以區別所有ie和firefox.

"*" ie6、ie7可以識別.ie8、firefox不能.

"_" ie6可以識別"_",ie7、ie8、firefox不能.

針對不同瀏覽器核心css寫法

針對谷歌瀏覽器核心支援的css樣式 media screen and webkit min device pixel ratio 0 針對ie6特製識別的css樣式 html searchbox 針對ie7特製識別的css樣式 html searchbox 針對firefox瀏覽器的核心css寫法 ...

css在各種瀏覽器中的不同寫法整理 IE與FF

複製 如下 margin 0px 0px 4px 0px important 適合ie7.0 margin 0px 5px 4px 0px 適合ie6.0 margin 0px 0px 0px 0px 適合ff 區程式設計客棧別ie6與ff 複製 如下 background orange backg...

解決CSS在不同瀏覽器的差別

bug,我們可以採用 important來解決這個問題,important是css1就定義的語法,作用是提高指定樣式規則的應用優先權。語法格式,即寫在定義的最後面,如 例 box ie不能認識 important,但是其它的瀏覽器都認識此標識,因此,我們 可以利用這個特性來相容瀏覽器,如 box 但...