兼容IE6/IE7/IE8/FireFox的css hack
作者：未知 來(lái)源：不詳 發(fā)布時(shí)間：2015/12/12 16:13:39
1 2 3 4 5 6 | .color{ background-color: #CC00FF; background-color: #FF00009; *background-color: #0066FF; _background-color: #009933; } |
**記住上面得樣式解釋為順序是 ff、ie8、ie7、ie6 ** 顯示的結(jié)果： 用火狐瀏覽，顏色是紫色 用 IE8 瀏覽，顏色是紅色 用 IE7 瀏覽，顏色是藍(lán)色 用 IE6 瀏覽，顏色是綠色
IE8 最新css hack： "" 例:"margin:0px auto;".這里的""可以區(qū)別所有IE和FireFox. "9" 例:"margin:0px auto9;".這里的"9"可以區(qū)別所有IE和FireFox. "*" IE6、IE7可以識(shí)別.IE8、FireFox不能. "_" IE6可以識(shí)別"_",IE7、IE8、FireFox不能.
一些IE6 IE7 IE8 FF的CSS hack
1 2 3 4 5 6 | p{+color:#f00;} 支持 IE6 IE7 不支持FF IE8p{_color:#f00;} 支持 IE6 不支持FFp{color:#00f !important;}p{color:#f00;} 支持 IE7 IE6 FF IE8p{color:#00f !important;color:#f00;} 支持 IE7 IE8 FF 不支持 IE6head:first-child+body p{color:#f00;} 支持 IE7 IE8 FF 不支持 IE6 |
各瀏覽器CSS hack兼容表：
| IE6 | IE7 | IE8 | Firefox | Chrome | Safari | |
| !important | Y | Y | ||||
| _ | Y | |||||
| * | Y | Y | ||||
| *+ | Y | |||||
| 9 | Y | Y | Y | |||
| Y | ||||||
| nth-of-type(1) | Y | Y |
小知識(shí)：什么是CSS hack？
由于不同的瀏覽器，比如IE6、IE7、IE8、Firefox等，對(duì)CSS的解析認(rèn)識(shí)不一樣，因此會(huì)導(dǎo)致生成的頁(yè)面效果不一樣，得不到我們所需要的頁(yè)面效果。
這個(gè)時(shí)候我們就需要針對(duì)不同的瀏覽器去寫(xiě)不同的CSS，讓它能夠同時(shí)兼容不同的瀏覽器，能在不同的瀏覽器中也能得到我們想要的頁(yè)面效果。
這個(gè)針對(duì)不同的瀏覽器寫(xiě)不同的CSS code的過(guò)程，就叫CSS hack，也叫寫(xiě)CSS hack。
下一篇：CSS3中新出現(xiàn)的技術(shù)元素
