CSS Hack 和向後相容

2022-07-22 02:09:12 字數 3065 閱讀 9589

1

instructions: //unvalidate23

僅 firefox 3 和 ie7 識別的 hack:

4selector, x:-moz-any-link, x:default 78

如果想區分opera和safari的話先寫

9@media all and (min-width: 0px)

11然後寫

12@media screen and (-webkit-min-device-pixel-ratio:0){}

一、新增在屬性上

* ie6,ie7識別,ff不識別

_ ie6識別,ie>7,ff不識別

# ie 識別  

eg: .selector

.selector

.selector

二、新增在屬性值上 

!important ie>7, ff 識別  

.selector 

三、新增在選擇器上

四、新增在全域性 

html: 新增body class:

class="ie6">  

class="ie7">  

class="ie8">  

class="ie9">  

class="non-ie">

.sofish  

.non-ie .sofish

.ie9 .sofish

.ie8 .sofish

.ie7 .sofish

.ie6 .sofish

/* webkit and opera */

@media all and (min-width: 0px) }  

/* webkit */

@media screen and (-webkit-min-device-pixel-ratio:0) }

/* opera */  

@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) }

/* firefox * /

@-moz-document url-prefix()} /* all firefox */

html>/**/body .sofish, x:-moz-any-link, x:default /* newest firefox */  

[/css]

然後,從第二種方式我們也可以發現。把ie注釋用在body class上,而不是新增單獨的或者@import會是更好的選擇。雖然分檔案也是一種不錯的選擇,但了為頁面載入速度,http請求一 個都不能浪費。

至於利用js或者後端程式來判斷,除非你有足夠的資源,除非你解決不了(90%不會發生),不然,並不推薦用。附上乙個表 (via),可以參考參 考:

[cc lang="css"]

/***** selector hacks ******/

/* ie6 and below */

* html #uno  

/* ie7 */

*:first-child+html #dos  

/* ie7, ff, saf, opera  */

html>body #tres

/* ie8, ff, saf, opera (everything but ie 6,7) */

html>/**/body #cuatro

/* opera 9.27 and below, safari 2 */

html:first-child #cinco

/* safari 2-3 */

html[xmlns*=""] body:last-child #seis

/* safari 3+, chrome 1+, opera9+, ff 3.5+ */

body:nth-of-type(1) #siete

/* safari 3+, chrome 1+, opera9+, ff 3.5+ */

body:first-of-type #ocho

/* saf3+, chrome1+ */

@media screen and (-webkit-min-device-pixel-ratio:0)

} /* iphone / mobile webkit */

@media screen and (max-device-width: 480px)

} /* safari 2 - 3.1 */

html[xmlns*=""]:root #trece  

/* safari 2 - 3.1, opera 9.25 */

*|html[xmlns*=""] #catorce

/* everything but ie6-8 */

:root *> #quince

/* ie7 */

*+html #dieciocho

/* firefox only. 1+ */

#veinticuatro,  x:-moz-any-link  

/* firefox 3.0+ */

#veinticinco,  x:-moz-any-link, x:default  

/***** attribute hacks ******/

/* ie6 */

#once

/* ie6, ie7 */

#doce

/* everything but ie6 */

#diecisiete

/* ie6, ie7, ie8 */

#diecinueve

/* ie7, ie8 */

#veinte

/* ie6, ie7 -- acts as an !important */

#veintesiete /* string after ! can be anything */

說CSS Hack 和向後相容

人一旦習慣了某些東西就很難去改,以及各種各樣的原因,新的瀏覽器越來越多,而老的總淘汰不了。增長總是快於消亡導致了瀏覽器相容是成了談不完的話題。說到瀏覽器相容,css hack自然而然地被我們想起。今天,我們通常都有乙個團隊或者將有乙個團隊的人在乙個公司裡面做相同的事,需要我們有統一的規範來進行cod...

向後相容和向前相容

向後相容和向前相容,什麼是向後相容?我的理解是 我們之前開發的產品 是向後相容的,後開發的版本一定要能夠使用舊的版本,就好像word07可以開啟在word03中編輯的文字 03打不開07的 color red 一句話總結,後面版本的程式可以開啟前面版本的程式 color 而什麼是向前相容?我的理解是...

什麼是向前相容和向後相容?

1 簡述 博主的書籤頁一直留著乙個問題,軟體的向前相容和向後相容,以前一直被這個問題所困擾,今天來記錄 2 向前相容和向後相容 從軟體行業的起源理解這兩個概念就不會很難,軟體起源於國外 個人理解 因此,理解這兩個詞最好也是按照英語的習慣來 forward compatibility 向前相容 upw...