各種版本瀏覽器之間對(duì)css進(jìn)行解釋之后,網(wǎng)頁(yè)內(nèi)容會(huì)產(chǎn)生誤差,和js一樣,一個(gè)效果在各個(gè)版本瀏覽器中顯示不同,甚至失效。采取的不同css樣式來(lái)解決這些問(wèn)題就叫做 CSS hack。
css hack大致可以分為三種表現(xiàn)形式
1. css屬性前綴法
\9:所有IE瀏覽器都支持
_和-:僅IE6支持
*:IE6、E7支持
\0:IE8、IE9支持,opera部分支持
\9\0:IE8部分支持、IE9支持
\0\9:IE8、IE9支持
Demo1
.hack{
/*demo1?注意順序,否則IE6/7下可能無(wú)法正確顯示,導(dǎo)致結(jié)果顯示為白色背景*/
background-color:red;/*?All?browsers?*/
background-color:blue!important;/*?All?browsers?but?IE6?*/
*background-color:black;/*?IE6,?IE7?*/
+background-color:yellow;/*?IE6,?IE7*/
background-color:gray\9;/*?IE6,?IE7,?IE8,?IE9,?IE10?*/
background-color:purple\0;/*?IE8,?IE9,?IE10?*/
background-color:orange\9\0;/*IE9,?IE10*/
_background-color:green;/*?Only?works?in?IE6?*/
*+background-color:pink;/*??WARNING:?Only?works?in?IE7????*/
}
Demo2
.iehack{
background-color:orange;/*?all?-?for?Firefox/Chrome?*/
background-color:red\0;/*?ie?8/9/10/Opera?-?for?ie8/ie10/Opera?*/
background-color:blue\9\0;/*?ie?9/10?-?for?ie9/10?*/
*background-color:black;/*?ie?6/7?-?for?ie7?*/
_background-color:green;/*?ie?6?-?for?ie6?*/
}
2. 選擇器前綴法
選擇器前綴法,例如IE6能識(shí)別*html .class{},IE7能識(shí)別*+html .class{}
??為什么和css屬性前綴 不一致
@media screen\9{...}只對(duì)IE6/7生效
@media \0screen {body { background: red; }}只對(duì)IE8有效
@media \0screen\,screen\9{body { background: blue; }}只對(duì)IE6/7/8有效
@media screen\0 {body { background: green; }} 只對(duì)IE8/9/10有效
@media screen and (min-width:0\0) {body { background: gray; }} 只對(duì)IE9/10有效
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {body { background: orange; }} 只對(duì)IE10有效
3. IE條件注釋法
對(duì)所有判斷語(yǔ)句內(nèi)的代碼生效(不僅只有css)
針對(duì)所有ie(ie10+已經(jīng)不再支持)
<!--[if IE]>ie瀏覽器顯示內(nèi)容<![endif]-->
<!--[if lt IE 6]>ie6以下顯示的內(nèi)容<![endif]-->
<!--[if gte IE 6]>這段文字只在IE6以上(包括)版本IE瀏覽器顯示<![endif]-->
這段文字只在IE6以上(包括)版本IE瀏覽器顯示這段文字只在IE6以上(包括)版本IE瀏覽器顯示<!--[if IE 6]>在IE6瀏覽器顯示<![endif]-->
<!--[if ! IE 8]>在非IE8瀏覽器顯示<![endif]-->
<!--[if !IE]>在非ie瀏覽器<![endif]-->