CSS hack:
由于不同廠商的流覽器或某瀏覽器的不同版本(如IE6-IE11,Firefox/Safari/Opera/Chrome等),對CSS的支持、解析不一樣,導致在不同瀏覽器的環境中呈現出不一致的頁面展現效果。這時,我們為了獲得統一的頁面效果,就需要針對不同的瀏覽器或不同版本寫特定的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*/