CSS hack:
由于不同廠商的流覽器或某瀏覽器的不同版本(如IE6-IE11,Firefox/Safari/Opera/Chrome等),對CSS的支持旺订、解析不一樣弄企,導致在不同瀏覽器的環(huán)境中呈現出不一致的頁面展現效果。這時区拳,我們?yōu)榱双@得統一的頁面效果拘领,就需要針對不同的瀏覽器或不同版本寫特定的CSS樣式,我們把這個針對不同的瀏覽器/不同版本寫相應的CSS code的過程樱调,叫做CSS hack!
如何寫:
- 屬性前綴法(即類內部Hack):例如 IE6能識別下劃線""和星號" "约素,IE7能識別星號" ",但不能識別下劃線""笆凌,IE6~IE10都認識"\9"圣猎,但firefox前述三個都不能認識
- 選擇器前綴法(即選擇器Hack):例如 IE6能識別html .class{},IE7能識別+html .class{}或者*:first-child+html .class{}
- IE條件注釋法(即HTML條件注釋Hack):針對所有IE(注:IE10+已經不再支持條件注釋): 乞而,針對IE6及以下版本: 送悔。這類Hack不僅對CSS生效,對寫在判斷語句里面的所有代碼都會生效
IE7&IE8 hack:
- 條件注釋:
<!--[if IE 7]>
這段文字只在IE7瀏覽器顯示
<![endif]-->
<!--[if IE 8]>
這段文字只在IE8瀏覽器顯示
<![endif]-->
-
類內屬性前綴法
/*類內部hack:*/
.header {_width:100px;} /* IE6專用*/
.header {*+width:100px;} /* IE7專用*/
.header {*width:100px;} /* IE6爪模、IE7共用*/
.header {width:100px\0;} /* IE8欠啤、IE9共用*/
.header {width:100px\9;} /* IE6、IE7屋灌、IE8洁段、IE9共用*/
.header {width:330px\9\0;} /* IE9專用*/
/*選擇器Hack:*/
*html .header{} /*IE6*/
*+html .header{} /*IE7*/