在我們設計**或者在製作主題的時候都需要用到css,但是現在瀏覽器特別多,每種瀏覽器顯示的效果不一樣我們怎麼來區別這些惱人的瀏覽器顯示問題呢?今天分享一篇區別各個瀏覽器相容性呢
針對樣式名
如果只讓ie6看見用*html .head
如果只讓ie7看見用*+html .head
如果只讓ff看見用:root body .head
如果只讓ff、ie8看見用html>/**/body .head
如果只是不讓ie6看見用html>body .head 即對ie 6無效
如果只是不讓ff、ie8看見用*body .head 即對ff、ie8無效
谷歌瀏覽器、safari
@media screen and (-webkit-min-device-pixel-ratio:0)
}針對具體屬性
如果只讓ie6看見用_ .head
如果只讓ie7看見用+與_結合的方法: .head
ie8正式版hack
\9″ 例:」margin:0px auto\9;」.這裡的」\9″可以區別所有ie8和firefox.
「*」 ie6、ie7可以識別.ie8、firefox不能.
「_」 ie6可以識別」_」,ie7、ie8、firefox不能.
如:.a
從左到右分別對應 ff,ie8 ie7 ie6
各瀏覽器css hack相容表:
ie6ie7
ie8firefox
chrome
safari
!importantyy
_y*y
y*+y\9
yyy\0
ynth-of-type(1)yy
**示例:
#test
body:nth-of-type(1) p /* chrome、safari支援 */
整體測試**示例:
.test
其他說明:
1、如果你的頁面對ie7相容沒有問題,又不想大量修改現有**,同時又能在ie8中正常使用,微軟聲稱,開發商僅需要在目前相容ie7的**上新增一行**即可解決問題,此**如下:
2、body:nth-of-type(1) 如果這樣寫,表示全域性查詢body,將會對應第乙個。
3、還有其他寫法,比如:
*html #test{}或者 *+html #test{}
4、*+html 對ie7的hack 必須保證html頂部有如下宣告:
5、順序:firefox、ie8、ie7、ie6依次排列。
小知識:什麼是css hack?
由於不同的瀏覽器,比如ie6、ie7、ie8、firefox等,對css的解析認識不一樣,因此會導致生成的頁面效果不一樣,得不到我們所需要的頁面效果。
這個時候我們就需要針對不同的瀏覽器去寫不同的css,讓它能夠同時相容不同的瀏覽器,能在不同的瀏覽器中也能得到我們想要的頁面效果。
這個針對不同的瀏覽器寫不同的css code的過程,就叫css hack,也叫寫css hack。
比如 ie6能識別下劃線_和星號*,ie7能識別星號*,當不能識別下劃線_,而firefox兩個都不能認識。等
書寫順序,一般是將識別能力強的瀏覽器的css寫在後面。下面如何寫裡面說得更詳細些。
如何寫css hack
比如要分辨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 !important;*background:blue;
注:ie都能識別*;標準瀏覽器(如ff)不能識別*;
ie6能識別*,但不能識別 !important,
ie7能識別*,也能識別!important;
ff不能識別*,但能識別!important;
ie6 ie7 ff
!important × √ √
另外再補充乙個,下劃線「_」,
ie6支援下劃線,ie7和firefox均不支援下劃線。
於是大家還可以這樣來區分ie6,ie7,firefox
: background:orange;*background:green;_background:blue;
注:不管是什麼方法,書寫的順序都是firefox的寫在前面,ie7的寫在中間,ie6的寫在最後面
ie專用的條件注釋
< !– 適合於ie7 –>
< ![endif]–>
< !– 適合於ie6及一下 –>
< ![endif]–>
主流瀏覽器相容HACK
propertyname value和單位 9 僅ie8識別 propertyname value 單位 selector ie7識別 propertyname value 單位 ie6識別 safari和 chrome 使用 media screen and webkit min device p...
hack 瀏覽器相容css hack)
1.hack的原理 由於不同的瀏覽器對css的支援及解析結果不一樣,還由於css中的優先順序的關係。我們就可以根據這個來針對不同的瀏覽器來寫不同的css。css hack大致有3種表現形式,css類內部hack 選擇器hack以及html頭部引用 if ie hack,css hack主要針對類內部...
瀏覽器相容的css寫法
1.ie6 ie7 ie8相容寫法 color ccc 只ie6支援 color ccc ie6 7支援 color ccc ie7支援 color ccc 0 0 ie8支援 color ccc 9 9 ie6 7 8支援 2.瀏覽器核心代表 ms transform rotate 7deg ms...