常用資源-技術(shù)-06csshack解決兼容

內(nèi)容提要CSS

hackCSS

Hack的原理如何寫CSS

HackCSS

hack由于不同的瀏覽器，對(duì)CSS的解析認(rèn)識(shí)不一樣，從而導(dǎo)致生成的頁(yè)面效果不一樣，得不到

所

需要的頁(yè)面效果。針對(duì)不同的瀏覽器寫不同的CSScode的過程，就叫CSS

hack,也叫寫CSS

hack注：一般是將識(shí)別能力強(qiáng)的瀏覽器的CSS寫在后面如何寫CSS

Hack——區(qū)別IE6與FFIE都能識(shí)別*;標(biāo)準(zhǔn)瀏覽器(如FF)不能識(shí)別*例如：div{background:orange;*background:blue;}如何寫CSS

Hack——區(qū)別IE6與IE7IE6能識(shí)別*，但不能識(shí)別

!important,IE7能識(shí)別*，也能識(shí)別!important;

例如：div{background:green

!important;background:blue;}如何寫CSS

Hack——區(qū)別IE7與FFFF不能識(shí)別*，但能識(shí)別!important;例如：div{background:orange;*background:green;}如何寫CSS

Hack——區(qū)別FF，IE7，IE6：FF不能識(shí)別*，但能識(shí)別!important;例如：div{background:orange;*background:green

!important;*background:blue;}如何寫CSS

Hack——區(qū)別FF，IE7，IE6：IE6支持下劃線，IE7和firefox均不支持下劃線。例如：div{background:orange;*background:green;_background:blue;}如何寫CSS

Hack——區(qū)別FF，IE7，IE6總結(jié)：IE都能識(shí)別*;標(biāo)準(zhǔn)瀏覽器(如FF)不能識(shí)別*；IE6能識(shí)別*，但不能識(shí)別

!important,IE7能識(shí)別*，也能識(shí)別!important;FF不能識(shí)別*，但能識(shí)別!important;IE6支持下劃線，IE7和firefox均不支持下劃線如何寫CSS

Hack——區(qū)別FF，IE7，IE6：使用“*+html”例如：#example

{

color:

#333;

}

/*

FF

*/*

html

#example

{

color:

#666;

}

/*

IE6

*/*+html

#example

{

color:

#999;

}

/*

IE7

*/如何寫CSS

Hack——IE的if條件Hack<!--[if

IE]>

Only

IE<![endif]-->所有的IE可識(shí)別<!--[if

IE

5.0]>Only

IE

5.0<![endif]-->只有IE5.0可以識(shí)別<!--[if

gt

IE

5.0]>Only

IE

5.0+<![endif]-->IE5.0包換IE5.5都可以識(shí)別<!--[if

lt

IE

6]>Only

IE

6-<![endif]-->僅IE6可識(shí)別<!--[if

gte

IE

6]>

Only

IE

6/+<![endif]-->IE6以及IE6以下的IE5.x都可識(shí)別<!--[if

lte

IE

7]>Only

IE7/-<![endif]-->僅IE7可識(shí)別如何寫CSS

Hack——Chrome瀏覽器-選擇器Hack/*

Chrome

24-

and

Safari

5-

*/::made-up-pseudo-element,

.selector

{代碼放在這里}如何寫CSS

Hack——Chrome瀏覽器-

查詢Hacks/*

Chrome,

Safari

3+

*/@media

screen

and

(-webkit-min-device-pixel-ratio:0)

{代碼放在這里}如何寫CSS

Hack——Firefox瀏覽器-屬性選擇器Hack/*

Firefox

1.5

*/body:empty

.selector{樣式代碼放這里}/*

Firefox

2+

*/.selector,x:-moz-any-link

{樣式代碼放這里}/*

Firefox

3+*/.selector,

x:-moz-any-link;

x:default{樣式代碼放這里}/*

Firefox

3.5+

*/body:not(:-moz-handler-blocked)

.selector

{樣式代碼放這里}如何寫CSS

Hack——Firefox瀏覽器-

查詢Hack/*

Firefox

3.5+,

IE

9/10,

Opera

*/@media

screen

and

(min-resolution:

+72dpi){樣式代碼放這里}/*

Firefox

3.6+

*/s:0)

{@media

screen

and

(-moz-images-in-樣式代碼放這里}/*

Firefox

4+

*/@media

screen

and

(min--moz-device-pixel-ratio:0)

{樣式代碼放這里}如何寫CSS

Hack——Firefox瀏覽器-混合型Hackurl-prefix()

{/*

Firefox

3+

*/@-moz-樣式代碼放這里}如何寫CSS

Hack——Opera瀏覽器-屬性選擇器Hack/*

Opera

9.25,

Safari

2/3.1

*/*|html[xmlns*=""]

.selector

{樣式代碼放這里}/*

Opera

9.27

and

below,

Safari

2*/html:樣式代碼放這里}/*

Opera

9.5+

*/noindex:-o-prefocus,

.selector

{樣式代碼放這里}如何寫CSS

Hack——Opera瀏覽器-

查詢Hack*

Opera

7

*/@media

all

and

(min-width:

0px){樣式代碼放這里}/*

Opera

12-

*/@mediaall

and

(-webkit-min-device-pixel-ratio:10000),

not

all

and(-webkit-min-device-pixel-ratio:0)

{樣式代碼放這里}/*

Opera,

Firefox

3.5+,

IE

9/10

*/@media

screen

and

(min-resolution:

+72dpi)

{樣式代碼放這里}/*

Opera,

IE

8/9/10

*/@media

screen

{樣式代碼放這里}如何寫CSS

Hack——Safari瀏覽器-屬性選擇器Hack/*

Safari

2/3

*/html[xmlns*=""]

body:last-child

.selector

{樣式代碼放這里}html[xmlns*=""]:root

.selector

{樣式代碼放這里}/*

Safari

2/3.1,

Opera

9.25

*/*|html[xmlns*=""]

.selector

{樣式代碼放這里}