欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

CSS hack的實際應用

老白3年前1151瀏覽0評論

解釋一下:上面的css在firefox中,它是認識不了后面的那個帶星號的東西是什么的,于是將它過濾掉,不予理睬,解析得到的結果是:div{background:green} ,于是理所當然這個div的背景是綠色的。在IE6中呢,它兩個background都能識別出來,它解析得到的結果是:div{background:green;*background:red;} ,于是根據優先級別,處在后面的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 ;IE7能識別*,能識別!important;FF不能識別*,但能識別!important;

瀏覽器優先級別:

FF<IE7<IE6,CSS hack

 書寫順序一般為FF IE7 IE6

以: " #demo {width:100px;} "為例:

#demo {width:100px;} /*被FIREFOX,IE6,IE7執行.*/* html #demo {width:120px;} /*會被IE6執行,之前的定義會被后來的覆蓋,所以#demo的寬度在IE6就為120px; */*+html #demo {width:130px;} /*會被IE7執行*/所以最后,#demo的寬度在三個瀏覽器的解釋為: FIREFOX:100px; ie6:120px; ie7:130px;IE8 最新css hack:"9" 例:"border:1px 9;".這里的"9"可以區別所有IE和FireFox.(只針對IE9 Hack)"0" IE8識別,IE6、IE7不能."*" IE6、IE7可以識別.IE8、FireFox不能."_" IE6可以識別"_",IE7、IE8、FireFox不能.

 IE6 hack

_background-color:#CDCDCD;/*ie6*/

 IE7 hack

*background-color:#dddd00; /* ie 7*/IE8 hackbackground-color:red 0; /* ie 8/9*/IE9 hackbackground-color:blue 90;火狐,傲游,瀏覽器通用background-color:red!important;

注意寫hack的順序,其中:

background-color:red0;IE8和IE9都支持;background-color:blue90; 僅IE9支持;另外,background-color:eeeeee9;的HACK支持IE6-IE8,但是IE8不能識別“*”和“_”的CSS HACK。

可綜合上述規律靈活應用。

IE9 和 IE8 以及其他版本的區別說明

background-color:blue; 各個瀏覽器都認識,這里給firefox用;background-color:red9;9所有的ie瀏覽器可識別;background-color:yellow0; 0 是留給ie8的,最新版opera也認識,后面自有hack寫了給opera認的,所以,0我們就認為是給ie8留的;+background-color:pink; + ie7定了;_background-color:orange; _專門留給神奇的ie6;:root #test { background-color:purple9; } :root是給ie9的,網上流傳了個版本是 :root #test { background- color:purple0;},這個,新版opera也認識,所以經筆者反復驗證最終ie9特有的為:root 選擇符 {屬性9;}@media all and (min-width:0px){ #test {background-color:black0;} } 這個是老是跟ie搶著認0的神奇的opera,必須加個0,不然firefox,chrome,safari也都認識。。。@media screen and (-webkit-min-device-pixel-ratio:0){ #test {background-color:gray;} }最后這個是瀏覽器新貴chrome和safari的。

選擇符級HackCSS內部選擇符級Hack語法

<hack> selector{ sRules }

說明選擇不同的瀏覽器及版本盡可能減少對CSS Hack的使用。Hack有風險,使用需謹慎通常如未作特別說明,本文檔所有的代碼和示例的默認運行環境都為標準模式。一些CSS Hack由于瀏覽器存在交叉認識,所以需要通過層層覆蓋的方式來實現對不同瀏覽器進行Hack的。簡單列舉幾個:

* html .test{color:#090;} /* For IE6 and earlier */* + html .test{color:#ff0;} /* For IE7 */.test:lang(zh-cn){color:#f00;} /* For IE8+ and not IE */.test:nth-child(1){color:#0ff;} /* For IE9+ and not IE */

內部屬性HackCSS內部屬性級Hack語法:

selector{<hack>?property:value<hack>?;}

取值:

注意: 不管是什么方法,書寫的順序都是firefox的寫在前面,IE7的寫在中間,IE6的寫在最后面。補充:IE6能識別* ,但不能識別 !important,IE7能識別 *,也能識別!important;FF不能識別 *,但能識別!important;下劃線” _ “,IE6支持下劃線,IE7和firefox均不支持下劃線。